开发时如何避免使用 Webpack 进行两次 React 加载

IT技术 npm reactjs webpack
2021-03-27 07:51:45

给定以下目录结构：

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

你可以看到my-project和module-x都需要 React。我遇到了与此问题中描述的相同的问题，但建议从 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 保存在一个单独的目录中，但似乎我必须发布它然后将它安装到我的项目中来测试它，这不是很有效。我想过npm link，但没有运气，因为它仍然在module-x 中安装了 node_modules 。

这听起来很像我遇到的相同挑战，但似乎npm dedupeWebpack 的重复数据删除选项不起作用。我可能没有理解一些重要的细节。

3个回答

使用npm link. 链接module将在其自己的module树中解决其依赖关系，这与需要它的module不同。因此，该npm link命令安装peerDependencies以及dependencies.

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

resolve: {
  alias: {
    react: path.resolve('./node_modules/react'),
  },
},
这个解决方案仍然会导致 webpack 分配不同的 ID 来响应从应用程序引用的反应和从链接module引用的反应。所以 webpack 创建的 react module的多个实例。
2021-05-22 07:51:45
2021-06-06 07:51:45
我在这个问题上花了半天时间。不幸的是，浏览器中的错误消息和 Webpack 文档都没有太大帮助。你救了我的一天！谢谢！！🤗
2021-06-07 07:51:45

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

# 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 文件夹链接到库来将库与只有一个应用程序相关联。因此，不可能同时使用两个应用程序（例如图书馆的示例页面和消费者应用程序）。
2021-05-24 07:51:45
这个答案用 CRA（创建 React 应用程序）拯救了我的一天。通过添加具有绝对路径的结果链接，答案可能更容易理解。
2021-06-03 07:51:45
@alek 我发现 yalc 很有用，如果您使用纱线，则如果使用另一种解决方案，则纱线工作区很有用。
2021-06-09 07:51:45
@MatthiasDailey 知道如果我们有更多项目如何解决吗？
2021-06-15 07:51:45
如果您使用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
2021-06-21 07:51:45

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

在图书馆：

  1. 安装程序时产生的问题为图书馆peerDependencies的package.json替代dependencies或者devDependencies，如在我的情况react：
"peerDependencies": {
  "react": "^16.8.6",
  ...
}
  1. 跑 npm install
  2. 构建库（在我的情况下，使用rollup -cnpm 脚本

在我的主应用程序中：

  1. 将我的库的版本更改为指向我的本地项目，其中的相对路径为package.json，例如
"dependencies": {
  "my-library": "file:../../libraries/my-library",
  ...
}

  1. 添加resolve.symlinks = false到我的主应用程序的 webpack 配置

  2. 添加--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",
}
  1. 跑 npm install
  2. 跑 npm run start
其它你可能感兴趣的问题
上一篇动态渲染 React 组件 下一篇React-router v4 - 无法获取 *url*