需要一个“yarn/npm link”工作流程来开发和发布“反应的多个副本”模块

Posted 2023-02-22

【中文标题】需要一个“yarn/npm link”工作流程来开发和发布“反应的多个副本”模块

【英文标题】：Need a "yarn/npm link" workflow for dev and publishing for "multiple copies of react" module

【发布时间】：2018-05-08 23:55:30

【问题描述】：

我正在构建一个模块并将其发布到 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，将此模块包含在父投影中。当包含在父项目中时，会引发错误

元素引用被指定为字符串（画布），但没有设置所有者。 你可能加载了多个 React 副本。 （细节： https://reactjs.org/warnings/refs-must-have-owner.html)。

我之前尝试过使用 npm 而不是 yarn 的工作流程，但遇到了同样的问题。

我希望这是通过样板文件解决的问题。我看过其他项目，但没有看到一个通用的解决方案。我正在寻找高级别的最佳实践答案。我愿意接受使用 webpack rollup 或其他方式的配置。

【参考方案1】：

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

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

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

【讨论】：

如果你使用 Rollup.js 会怎样？将与 Rollup 捆绑在一起的 UI 库与导入本地 UI 库并使用 webpack + webpack-dev-server 的应用程序项目结合起来，有什么好的开发工作流程？

【参考方案2】：

我目前在我的项目中使用的选项包括完全跳过 npm/yarn 链接，并将 NPM 脚本添加到 symlink 任何本地包到 node_modules 文件夹中，例如：

创建一个空的node_modules 文件夹 运行本地依赖链接脚本 从根项目安装 NPM 依赖项

如果模块和托管项目声明了兼容的 React 依赖项，那么您最终应该得到您的本地模块符号链接并且只安装了一个 React 实例。

您可能还希望使用 this 等工具自动链接本地依赖项。

【讨论】：

如果我错了，请纠正我。这似乎要求父/宿主项目在其package.json 中有一个本地文件路径，当部署到没有本地模块的环境时如何处理？

一旦发布，上述包将作为正常的 NPM 依赖项使用。只要它们声明了与 React 兼容的依赖项，NPM 就应该能够使它们依赖于同一个 React 实例。

为了澄清，我说的是宿主项目“应用程序”，而不是发布到 NPM 的模块。 “应用程序”是传统上执行npm link module_name 的代码库。这听起来就像在部署“应用程序”时我必须编辑 package.json 以将本地路径更改为 NPM 包名称的路径，并在开发时执行相反的操作。

我的建议是在 dev 中将本地模块 I 符号链接到 node_modules 文件夹中，并让 package.json 声明对该模块的正常 NPM 注册表依赖。

【参考方案3】：

webpack 配置中的 externals 会很有用。

// webpack.config.js
module.exports = 
  //...
  externals: ['react', 'react-dom'],

react组件库一般不需要安装react。