需要一个“yarn/npm 链接”工作流来开发和发布“多个 react 副本”模块

Question

我正在构建一个模块并将其发布到 npm。该模块依赖于React. 我目前正在使用yarn和yarn link。

我已经在父项目中构建了这个模块，现在正试图将它提取到一个独立的模块中。我想继续在本地开发模块作为父项目的一部分。

将package.json在模块的样子：

  "devDependencies": {
    "react": "^16.1.1",
    "react-reconciler": "^0.6.0",
    "react-dom": "^16.0.0",
    "regl": "^1.3.0",
}

我通过yarn link在模块目录中运行然后yarn link module-name在父目录中运行将此模块包含在父投影中。当包含在父项目中时会抛出错误

元素 ref 被指定为字符串（画布），但未设置所有者。您可能加载了多个 React 副本。（详情：https : //reactjs.org/warnings/refs-must-have-owner.html）。

我之前曾尝试过使用npm代替这个工作流程yarn，但遇到了同样的问题。

我希望这是一个已解决的样板问题。我看过其他项目，但没有看到通用的解决方案。我正在寻找一个高级别的最佳实践答案。我对使用的配置webpack rollup或其他方式持开放态度。

Answer 1

使用 Webpack，您可以使用resolve.alias带有 npm/yarn 的长链接，以便所有依赖项都使用主机应用程序中的单个 React 实例。

在您的开发 Webpack 配置中添加以下内容：

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