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

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 中使用第 3 方的东西，那也没关系。

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

FWIW，为了获得 versionNumber 我使用节点的 fs 模块从 json 文件中读取，使用 JSON.parse(file) 然后检索 webpack.config

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 可以很好地构建它（并且可以正常工作）。

How to require JavaScript using webpack from a dynamic directory