在开发过程中如何避免与Webpack发生两次负荷反应

Question

给定以下目录结构：

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

您可以看到my-project和模块-x require。我的问题与在这个问题上描述的问题相同，但建议是从package.json依赖项中移除响应。我这样做，它的工作很好，只要没有node_modules安装在模块-x，因为Webpack将使用从的反应我的项目。但是，如果我正在开发模块-x和安装了node_modules，Webpack使用的是my和模块-x。

有没有办法让Webpack确保只使用一个反应实例，即使它是在两个不同的层次上被要求的？

我知道在开发时我可以将模块-x保存在一个单独的目录中，但似乎我必须发布它，然后在my中安装它来测试它，这并不是很有效。我曾想过npm link，但没有运气，因为它仍然在模块-x中安装了node_modules。

这个在这里听起来很像我面临的挑战，但似乎npm dedupe或Webpack的dedupe选项行不通。我可能不了解一些重要的细节。

Answer 1

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

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

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

Answer 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

Answer 3

为了防止它对其他人有用，上面建议的解决方案对我无效，我必须执行以下步骤来解决这个问题：

库中的

1. 将生成问题的库设置为peerDependencies，在package.json中而不是在dependencies或devDependencies中，例如，在我的例子中是react

"peerDependencies": {
  "react": "^16.8.6",
  ...
}

1. 运行npm install
2. 构建库(在我的例子中，使用rollup -c npm脚本)

在我的主应用程序中

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