开发时如何避免React两次被Webpack加载

Question

给定以下目录结构：

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

您可以看到 my-project 和 module-x
都需要React。我对这个问题有同样的问题，但建议是从package.json依赖项中删除反应。我这样做了，只要在
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
。

这听起来很像我所面临的相同挑战，但似乎不是这样，npm dedupe或者Webpack的重复数据删除选项可以工作。我可能不了解一些重要的细节。

Answer 1

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

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

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