小编典典

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

reactjs

给定以下目录结构:

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

您可以看到 my-projectmodule-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的重复数据删除选项可以工作。我可能不了解一些重要的细节。


阅读 306

收藏
2020-07-22

共1个答案

小编典典

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

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

resolve: {
  alias: {
    react: path.resolve('./node_modules/react'),
  },
},
2020-07-22