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

Question

跟随场景

当前解决方案

复制粘贴CustomButton.jsx到项目 1 和 2 中。

所需的解决方案

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

问题

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

编辑

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

Answer 1

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

1.用你的组件创建一个项目（create-react-app应该没问题。无论如何你只会导出你的组件，这就是为什么项目设置无关紧要。它只是对开发和测试你的组件有用。）

2.使用rollup.js打包你的react组件（网上教程很多，google一下“rollup react组件库”）

3.向您添加一个新脚本以package.json使用rollup -c. 然后使用npm pack来创建包。

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

这将使用以下模式创建一个仅包含您需要的文件的压缩包：

[package-name]-[package-version].tgz 例如 my-react-components-0.1.0.tgz

您可以影响所得的包npm pack通过你的修改属性package.json，例如"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"

如果您需要对某个步骤进行更详细的解释，请在下面发表评论，我会添加更多信息。