我可以使用npm link来关联React组件吗？

Question

我有两个不同的项目，都是使用create-react-app脚手架搭建的。 第一个项目中，UI包含了一个简单的UI库。它只是一堆简单的组件，项目结构如下：

app
 src
   CustomButton.js
   ...

没有什么不寻常的。只是一些简单的React组件。第二个是应用程序本身。

是否可以使用npm link将UI项目添加为依赖项？我希望能够像这样从UI项目导入组件：

import {CustomButton} from 'UI';

- Mariik

Answer 1

是的，我经常这样做。来自npm链接文档:

软件包链接是一个两步过程。

首先，在软件包文件夹中运行npm link将在全局文件夹{prefix}/lib/node_modules/中创建一个符号链接，该符号链接指向执行npm link命令的软件包。它还将把软件包中的任何二进制文件链接到{prefix}/bin/{name}。请注意，npm link使用全局前缀（请参见npm prefix -g获取其值）。

接下来，在其他位置，运行npm link package-name将在当前文件夹的node_modules/中创建一个从全局安装的package-name到符号链接。

请注意，package-name是从package.json中获取的，而不是从目录名称中获取的。

例如：

cd ~/projects/my-components-lib  # go into the package directory
npm link                         # creates global link
cd ~/projects/my-app             # go into some other package directory.
npm link my-components-lib       # link-install the package

- Dean James

---

语法错误：C:\temp\ui\src\components\button.js: 当前未启用实验性语法"jsx"的支持（第4行，第12列）： 2 | 3 | export const Button = (props) => {

4 | return <button {...props}>{props.caption}</button> | ^ 5 | }

请在Babel配置文件的“presets”部分中添加@babel/preset-react（https://git.io/JfeDR）以启用转换。如果您想保留原样，请在“plugins”部分中添加@babel/plugin-syntax-jsx（https://git.io/vb4yA）以启用解析。 - Mariik

听起来应用程序配置有问题。我怀疑这不是npm链接的结果。你能在该应用程序中的npm模块之外呈现JSX吗？ - Dean James

配置绝对没有任何问题，因为我使用的是未经修改的 create-react-app。 - Mariik

我进行了快速测试并设置了一个新的 CRA。我链接了一个我创建的简单库，该库导出了一个基本组件，然后我遇到了你提到的相同错误。然后我再次尝试了一下，但这次我安装了一个来自 npm 的真正的包（randomstring），然后克隆它，然后链接它。没有任何问题，我能够修改克隆版本并在应用程序中看到更改。这强烈表明问题与链接库的配置有关。 - Dean James

这里肯定不止 npm link 吧？第一个项目（“my-components-lib”）肯定只是一堆源文件的集合（即不是应用程序本身，例如使用 CRA），可能还会从其 index.js 中导出它们？@DeanJames 有没有可能提供更多关于您的“my-components-lib”看起来像什么以及如何在“my-app”中使用其中的组件的示例？谢谢！ - Andy Lorenz