blocks|key|2505290|text|我目前在项目中使用的选项包括跳过npm/yarn链接，并将NPM脚本添加到符号链接任何本地包到node_modules文件夹中，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2505291|创建一个空的node_modules文件夹|unordered-list-item|2505292|运行本地依赖项链接脚本|2505293|从根项目安装NPM依赖项|2505294|如果模块和宿主项目声明了兼容的React依赖项，那么您最终应该使用，您的本地模块，符号链接的和，只有一个安装了的实例。|BOLD|2505295|您还可能希望使用这之类的工具来自动实现本地依赖项的链接。|2505296|entityMap|0|LINK|mutability|MUTABLE|url|https://nodejs.org/api/fs.html#fs_fs_symlinksync_target_path_type|1|https://github.com/timoxley/linklocal^0|G|3|K|4|1B|C|11|4|0|0|6|C|0|0|0|F|5|X|D|1B|8|1K|3|0|0|S|8|1|1|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]|$9|16|A|17|B|C]]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|F|3|G|5|H|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|I|3|J|5|H|7|1E|8|@]|D|@]|E|$]]|$1|K|3|L|5|H|7|1F|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|1G|8|@$9|1H|A|1I|B|C]|$9|1J|A|1K|B|O]|$9|1L|A|1M|B|O]|$9|1N|A|1O|B|O]]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1P|8|@$9|1Q|A|1R|B|O]]|D|@$9|1S|A|1T|1|1U]]|E|$]]|$1|R|3|-4|5|6|7|1V|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]|Z|$5|U|V|W|E|$X|10]]]]

The option I'm currently using on my projects consist of skipping <code>npm</code>/<code>yarn</code> linking at all, and add a NPM script to <a href="https://nodejs.org/api/fs.html#fs_fs_symlinksync_target_path_type" rel="nofollow noreferrer">symlink</a> any local package into <code>node_modules</code> folder like:

<ul>
<li>create an empty <code>node_modules</code> folder</li>
<li>run local dependencies linking script</li>
<li>install NPM dependencies from root project</li>
</ul>

If module and the hosting project declares compatible <code>React</code> dependencies you should end up with your local module symlinked and just one <code>React</code> instance installed.

You might also want to automate local dependencies linking with tools like <a href="https://github.com/timoxley/linklocal" rel="nofollow noreferrer">this</a>.

blocks|key|440796|text|与Webpack，您可以使用resolve.alias，一个长与npm/纱链接，以使所有依赖使用一个单一的实例，从您的主机应用程序反应。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|440797|在您的开发中，Webpack配置添加以下内容：|440798|resolve:+{
+++alias:+{
++++++react:+path.resolve('./node_modules/react'),
+++},
},|code-block|syntax|javascript|440799|entityMap^0|E|D|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

With Webpack you can use <code>resolve.alias</code> a long with npm/yarn link in order to have all dependencies use a single instance of React from your host app.

In your development Webpack config add the following:

<pre><code>resolve: {
 alias: {
 react: path.resolve('./node_modules/react'),
 },
},
</code></pre>

blocks|key|870494|text|webpack配置中的外部因素将是有用的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|870495|//+webpack.config.js
module.exports+=+{
++//...
++externals:+['react',+'react-dom'],
}|code-block|syntax|javascript|870496|通常，不需要安装react组件库。|870497|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

The externals in webpack config will be useful.

<pre class="lang-js prettyprint-override"><code>// webpack.config.js
module.exports = {
 //...
 externals: ['react', 'react-dom'],
}
</code></pre>

Normally the react component library does not need to be installed react.

I am building and publishing a module to npm. The module is dependent on <code>React</code>. I am currently using <code>yarn</code> and <code>yarn link</code>. 

I have built this module in a parent project and now am trying to extract it to a standalone module. I want to continue developing the module locally as part of the parent project.

The <code>package.json</code> in the module looks like:

<pre><code> "devDependencies": {
 "react": "^16.1.1",
 "react-reconciler": "^0.6.0",
 "react-dom": "^16.0.0",
 "regl": "^1.3.0",
}
</code></pre>

I include this module in a parent projection by running <code>yarn link</code> in the module directory and then <code>yarn link module-name</code> in the parent directory. When included in the parent project an error is then thrown

<blockquote>
 Element ref was specified as a string (canvas) but no owner was set.
 You may have multiple copies of React loaded. (details:
 <a href="https://reactjs.org/warnings/refs-must-have-owner.html" rel="noreferrer">https://reactjs.org/warnings/refs-must-have-owner.html</a>).
</blockquote>

I have previously tried this workflow using <code>npm</code> instead of <code>yarn</code> and had the same issues.

I'm hoping this is a solved problem with a boilerplate. I've looked at other projects and haven't seen a common solution. I"m looking for a high-level best practices answer. I'm open to configurations using <code>webpack</code> <code>rollup</code> or whatever.

Need a "yarn/npm link" workflow for dev and publishing for "multiple copies of react" module

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我正在建设和出版一个模块给国家预防机制。该模块依赖于React。我目前正在使用yarn和yarn link。我已经在一个父项目中构建了这个模块，现在我正在尝试将它提取到一个独立的模块中。我希望继续在本地开发模块，作为父项目的一部分。模块中的package.json如下所示：  "devDependencies": { ...

问需要开发“纱线/npm链接”工作流程，并发布“多个react”模块。
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问需要开发“纱线/npm链接”工作流程，并发布“多个react”模块。EN