使用 webpack 将 node_modules 路径解析为跨多个同级项目的启动文件夹

Question

我有几个同级文件夹/存储库：

| - A
| |- node_modules
| |- app
|
| - B
| |- node_modules
| |- app
| 
| - C
| |- node_modules
| |- app

由于存在交叉依赖关系，因此A可能需要B.

// A/app/script.js
var bDependency = require('B/app/script.js')


// B/app/script.js
var jquery = require('jquery')

在这种情况下，当 webpack 去捆绑它时，它将解析为jqueryto之前B的。这还会导致 webpack bundle.js 中出现重复的模块，因为它可能会解析为其他同级 node_modules 文件夹。（即使之后也是如此）node_modulesAnew webpack.optimize.DedupePlugin()

因此，即使它需要它并且已经安装了npm install库，我也必须将其包含在内。BA

我已经使用resolve、root 和modulesDirectories webpack 选项来进行一些友好的路径解析。

我想做的是首先解析启动文件夹的所有 node_modules 路径。有没有一种方法可以使用 webpack 的路径解析工具来实现这一目标，或者我应该重组应用程序以共享一个 node_modules ？

Answer 1

这可以通过 Webpack 的NormalModuleReplacementPlugin来解决：

new webpack.NormalModuleReplacementPlugin(new RegExp('path/to/B'), function(result) {
  result.request = result.request.replace("projectB", "projectA");
}),

任何与上面的正则表达式匹配的导入文件都会被该函数修改其路径，从而导致模块projectB/node_modules被抓取projectA/node_modules，从而防止重复。