javascript - 我应该在哪里存储我的 React 可重用组件？

Question

我有几个 ReactJS 项目，并且开始拥有很多可重用的组件。我不想将它们发布到 npm 或将它们与项目根目录下的 导入的 node_modules 目录混合。他们应该去哪里？

我的项目如下所示:

• 项目1/
  • 节点模块/
  • src/
    • index.js
    • A.jsx
• 项目2/
  • 节点模块/
  • src/
    • index.js
    • A.jsx

A.jsx 定义了一个可重用的组件，我只是将文件复制到各处...我只想将它放在一个地方，并且我的项目将其与 import A 一起使用来自“A”。

我尝试在 src/ 或 node_modules/ 中创建指向 A.jsx 的符号链接(symbolic link)，但无法编译，例如 react-scripts 无法处理它们。您是如何解决这个问题的？感谢您的帮助!

Answer 1

I do not want them mixed with the imported node_modules

为什么不呢？将可重用组件提取到它们自己的库中是使它们可重用的最佳方法。提取它们后，您可以通过仅导入您需要的内容来组成您的项目。您还可以编写自己的测试，而无需运行整个项目的测试。最后，您可以独立于项目处理不同版本的组件。

I have tried to make symlinks to A.jsx in src/ or in node_modules/ but…

将文件从一个项目符号链接(symbolic link)到另一个项目可能是一个好主意，但您是在项目之间创建依赖关系，而不是在项目和组件库之间创建依赖关系。如果要部署使用项目 A 中的组件的项目 B，则需要部署这两个项目并在服务器上重新创建符号链接(symbolic link)。此外，项目 A 可能是比简单组件库更大的依赖项(具有其自己的依赖项)。

I do not want to publish them to npm

如果你不想在 NPM 上发布你的组件(我两者都不做)，我仍然建议你将你的组件提取到他们自己的存储库中(GitLab 有免费的私有(private)存储库)。

然后您可以直接从存储库安装该库，如下所示:

npm install git+ssh://<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76111f0236111f02581b0f12191b171f185815191b" rel="noreferrer noopener nofollow">[email protected]</a>:Username/Repository-name

它将在您的 package.json 中创建一个条目:

"Repository-name": "git+ssh://<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abccc2dfebccc2df85c6d2cfc4c6cac2c585c8c4c6" rel="noreferrer noopener nofollow">[email protected]</a>:Username/Repository-name"

然后您可以导入可重用组件:

import { ComponentA, ComponentB } from 'Repository-name'