Question

给出以下目录结构：

my-project
|
|-- node_modules
    |
    |-- react
    |-- module-x
        |
        |--node_modules
            |
            |--react

您可以看到 my-project 和 module-x 都需要React。我有与this question中描述的相同的问题，但建议是从package.json依赖项中删除react。我这样做，只要没有在 module-x 中安装node_modules，它就能正常工作，因为Webpack将使用 my-project 中的React。但是如果我正在开发 module-x 并且安装了node_modules，那么Webpack将使用来自 my-project 和 module-x的React

有没有办法可以让Webpack确保只使用一个React实例，即使它需要在两个不同的级别上？

我知道在开发时我可以将 module-x 保存在单独的目录中，但似乎我必须将其发布，然后将其安装在 my-project 测试它，这不是很有效。我考虑过npm link，但没有运气，因为它仍然在 module-x 中安装了node_modules。

This here听起来很像我遇到的同样的挑战，但似乎不是npm dedupe或Webpack的重复数据删除选项可行。我可能不了解一些重要的细节。

Answer 1

使用npm link时通常会出现此问题。链接模块将在其自己的模块树中解析其依赖关系，这与需要它的模块不同。因此，npm link命令会安装peerDependencies以及dependencies。

您可以使用resolve.alias强制require('react')解析为本地版本的React。

resolve: {
  alias: {
    react: path.resolve('./node_modules/react'),
  },
},

Answer 2

如果您不想（或不能）修改项目配置，那么有一个更直接的解决方案：只需 npm link将自己反应回您的项目：

# link the component
cd my-app
npm link ../my-react-component

# link its copy of React back to the app's React
cd ../my-react-component
npm link ../my-app/node_modules/react

Answer 3

以防万一它对其他人有用，上面建议的解决方案对我不起作用，我不得不执行以下步骤来解决它：

在图书馆：

将产生问题的库设置为 peerDependencies 中的 package.json 而不是 dependencies 或 devDependencies，例如就我而言react：

"peerDependencies": {
  "react": "^16.8.6",
  ...
}

运行npm install
构建库（就我而言，使用 rollup -c npm 脚本

在我的主应用中：

更改我的库版本以指向我在 package.json 中具有相对路径的本地项目，例如

"dependencies": {
  "my-library": "file:../../libraries/my-library",
  ...
}

将 resolve.symlinks = false 添加到我的主应用程序的 webpack 配置
将 --preserve-symlinks-main 和 --preserve-symlinks 添加到我的 package.json 启动脚本中，例如：

"scripts": {
  "build": "set WEBPACK_CONFIG_FILE=all&& webpack",
  "start": "set WEBPACK_CONFIG_FILE=all&& webpack && node --preserve-symlinks-main --preserve-symlinks dist/server.js",
}

运行npm install
运行npm run start

如何避免在开发时使用Webpack重复加载两次

3 个答案: