如何避免在开发时使用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

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

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

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

Answer 2

如果您不想(或不能)修改项目配置,那么有一个更简单的解决方案:只需将npm linkReact本身恢复到您的项目中:

# 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