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

Question

我有一些旧式的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中使用第三方工具，那也可以。

- Alex White

Answer 1

我最终解决了这个问题。通过使用webpack的resolve.alias，我可以添加：

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

在webpack.config中。

然后在我的代码中，我可以通过以下方式要求所有/domain下的文件:

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

顺便说一句，为了获取versionNumber，我使用了node的fs模块从json文件中读取，使用JSON.parse(file)，然后在webpack.config的顶部检索版本。

- Alex White

---

如果你有多个动态变量怎么办？我需要从一个循环中进行调用。这真是太麻烦了。不知道为什么他们让它实现起来这么困难... - tylik

这个解决方案需要在循环中执行。请查看forEach。@tylik - Alex White

Answer 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

---

嗨@Anders，你是正确的。commonRequires与解决方案没有任何关系（我从未打算这样理解）。这只是一个需要动态路径下目录中的所有文件的示例。如果您回顾一下已接受的答案，您会发现我还指出：“同样，我可以通过...” - Alex White