使用 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 打包它时，它会在 A 之前解析为 jquery 到 B 的 node_modules。这也会导致 webpack bundle.js 中出现重复的模块，因为它可能会解析到其他同级 node_modules 文件夹。 （即使在new webpack.optimize.DedupePlugin() 之后也是如此）

所以我必须 npm install B 中的一个包，即使它是 A 需要它并且已经安装了库。

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

我想做的是首先将任何 node_modules 路径解析到启动文件夹。有没有办法使用 webpack 的路径解析工具来实现这一点，或者我应该重组应用程序以共享一个 node_modules？

Answer 1

我发现最优雅的解决方案是在 webpack.config.js 中为 resolve 对象定义一个 fallback 属性，指向启动文件夹的 node_modules 目录

resolve: {
    // Check the initiating folder's node_modules
    fallback: [
        path.join(__dirname, "node_modules")
    ]
}

您可以在此处阅读更多信息：https://webpack.github.io/docs/configuration.html#resolve-fallback

Answer 2

这可以通过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 中获取，从而防止重复。