开发时如何避免使用 Webpack 两次 React 加载答案

【问题标题】：How to avoid React loading twice with Webpack when developing开发时如何避免使用 Webpack 两次 React 加载
【发布时间】：2015-09-19 02:36:24
【问题描述】：

给定以下目录结构：

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 的重复数据删除选项不起作用。我可能没有理解一些重要的细节。

【问题讨论】：

标签： npm reactjs webpack

【解决方案1】：

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

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

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

【讨论】：

我在这个问题上花了半天时间。不幸的是，浏览器中的错误消息和 Webpack 文档都不是很有帮助。你拯救了我的一天！谢谢！！ ?
这个解决方案仍然会导致 webpack 分配不同的 ID 来响应从应用程序引用的响应和从链接模块引用的响应。所以 webpack 创建了多个 react 模块实例。
救了我。以下是文档：webpack.github.io/docs/configuration.html#resolve-alias

【解决方案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

【讨论】：

这可能会变得一团糟。库是一对多的（一个库安装在许多应用程序中），但这通过将应用程序的 react 文件夹链接到库来将一个库与仅一个应用程序相关联。因此，不可能同时使用两个应用程序（例如图书馆的示例页面和消费者应用程序）。
@MatthiasDailey 知道如果我们有更多项目如何解决它吗？
这个答案用 CRA（创建 React 应用程序）为我节省了一天。通过添加带有绝对路径的结果链接，答案可能更容易理解。
如果你使用yarn：# link the component cd my-app/node_modules/react yarn link # link its copy of React back to the app's React cd ../../../my-react-component yarn link react

【解决方案3】：

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

图书馆中：

在package.json 中将产生问题的库设置为peerDependencies，而不是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

【讨论】：