如何使用动态目录中的 webpack 要求 JavaScript

Posted 2023-02-24

【中文标题】如何使用动态目录中的 webpack 要求 JavaScript

【英文标题】：How to require JavaScript using webpack from a dynamic directory

【发布时间】：2017-03-18 12:54:19

【问题描述】：

我有一些老式的普通 ES5 javascript，我需要将它们拉入我使用 webpack 作为捆绑器的应用程序中。问题是这些文件的位置在一个路径是动态的文件夹中。似乎 webpack 不能很好地处理 require 中的表达式，而 require.context 根本不允许它们。

对于需要一个目录及其子目录中所有文件的已知路径目录，这种方法效果很好：

let domainRequires = require.context('./app/domain', true, /\.js$/); domainRequires.keys().forEach(domainRequires);

由于我不能在require.context 中使用表达式，我尝试只使用普通的require，它不起作用：

require('../../path/to/code/my-library-' + versionNumber + '/domain/clazz.js');

使用完整的相对路径。

我也尝试过使用require.context，但增强了正则表达式部分以使其正常工作并且没有运气：

require.context('../../path/to/code', true, /^my-library-.*\/domain\/.*\.js$/);

欢迎任何想法、建议或解决方案。如果我需要在 webpack 中使用 3rd 方，那也没关系。

【参考方案1】：

我最终想通了。通过使用 webpack resolve.alias，我可以添加：

resolve: 
  alias: 
    common: path.resolve(__dirname, '../../path/to/code/my-library-' + versionNumber + '/domain')
  

在webpack.config.

然后在我的代码中，我可以要求/domainvia 下的所有文件：

var commonRequires = require.context('common', true, /\.js$/);
commonRequires.keys().forEach(commonRequires);

同样，我可以通过以下方式获取单个文件：

require('common/clazz.js'); // ../../path/to/code/my-library-1.0.0/domain/clazz.js

FWIW，为了得到versionNumber，我使用node的fs模块从json文件中读取，使用JSON.parse(file)，然后在webpack.config顶部检索版本

【讨论】：

如果你有多个动态变量怎么办？我需要一个循环。这是一个真正的痛苦。不知道为什么他们让实施变得如此困难......

此解决方案确实需要循环。参见 forEach。 @tylik

【参考方案2】：

从 Webpack 3.9（我认为）开始，不需要 commonRequires。我在 webpack.config.js 中运行它：

resolve: 
  alias: 
    tmpDir: path.resolve(__dirname, '/tmp')
  

然后我将我的自定义模块加载为：

const dynModule = require('tmpDir/dyn_module.js');

不确定我是否遗漏了您的要求，但我不需要 commonRequires 并且 Webpack 可以很好地构建它（并且可以正常工作）。

【讨论】：

嗨@Anders，你是对的。 commonRequires 根本与解决方案无关（我从未打算这样解释）。这只是要求位于动态路径的目录中的所有文件的示例。如果您回头查看已接受的答案，您会发现我还指出：“同样，我可以通过...获取单个文件”