如何创建可在多个 React 项目中使用的私有共享组件库

以下场景

• 项目1需要使用CustomButton.jsx
• 项目2需要使用CustomButton.jsx

目前的解决方案

复制粘贴CustomButton.jsx进入项目 1 和 2。

所需的解决方案

1. 创建项目 3，其中包括CustomButton.jsx
2. 将项目 3 存储在共享环境中（例如上市公司目录，例如D://dev/react/my-component-library)
3. 通过 npm 为项目 1 和 2 安装项目 3 并添加依赖项package.json以保持 git 克隆之间的一致性。
4. Import CustomButton.jsx项目 1 和 2 中包含导入声明：import { CustomButton } from "my-component-library"

问题

1. 项目3是一个什么样的项目？它是用create-react-app或者可以使用其他哪些工具？
2. 如何从项目 3 中创建本地/私有 npm 包？
3. 我如何为该私有包使用共享的本地环境。
4. 如何在项目 1 和 2 中使用该包？

这些组件相当简单，不包含复杂的逻辑。

EDIT

这不应该花费我任何费用（私人 npm 需要）或使用第 3 方托管，因为我已经有一个私人共享的环境/服务器/目录，并且我可以在那里托管/存储包。

我在vue中解决了这个问题。但反应中的步骤应该非常相似。

1.使用您的组件创建一个项目（create-react-app应该没事。无论如何，您只会导出组件，这就是项目设置无关紧要的原因。它仅对开发和测试组件有用。）

2. Use rollup.js https://rollupjs.org/guide/en/捆绑你的React组件（网上有很多教程，只需谷歌“rollup React组件库”）

3.添加一个新脚本到你的package.json使用以下方式捆绑您的应用程序rollup -c。 然后使用npm pack https://docs.npmjs.com/cli/v6/commands/npm-pack创建包。

"build:lib": "rollup -c && npm pack"

这将创建一个压缩包，其中仅包含您需要的文件，格式如下：

[package-name]-[package-version].tgz e.g. my-react-components-0.1.0.tgz

您可以影响生成的包npm pack通过修改你的属性package.json, e.g. "version", "name", "main", "files"会影响输出。

4.现在您可以从另一个项目本地安装软件包：

npm i ../path/to/library/my-react-components-0.1.0.tgz

这将为您添加新的依赖项package.json:

"my-react-components": "file: ../path/to/library/my-react-components-0.1.0.tgz"

5.根据您的汇总设置，您可以像任何其他库一样使用您的库：

import { MyComponent } from "my-react-components";

您可能还需要导入样式：

import "my-react-components/index.css"

如果您需要有关步骤的更详细说明，请在下面发表评论，我将添加更多信息。