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

问题描述

以下场景

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

当前解决方案

将 CustomButton.jsx 复制粘贴到 Project 1 &2.

Copy paste CustomButton.jsx into both Project 1 & 2.

想要的解决方案

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

1. Create Project 3 which includes CustomButton.jsx
2. Store Project 3 in a shared environment (like a public company directory e.g. D://dev/react/my-component-library)
3. Install Project 3 via npm for Project 1 & 2 and add dependency to package.json to keep consistency accross git clones.
4. Import CustomButton.jsx with import statement in Project 1 & 2: import { CustomButton } from "my-component-library"

问题

1. 项目 3 是一个什么样的项目?它是使用 create-react-app 构建的还是可以使用其他工具?
2. 如何从 Project 3 中创建本地/私有 npm 包?
3. 我如何为该私有包利用共享的本地环境.
4. 如何使用 Project 1 & 中的包2?

1. What kind of Project is Project 3? Is it build with create-react-app or which other tool can be used?
2. How can I create a local/private npm package out of Project 3?
3. How can I utilize a shared, local environment for that private package.
4. How can I use the package in Project 1 & 2?

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

The components are fairly simple and don't contain complex logic.

编辑

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

This shouldn't cost me anything (private npm does) or use 3rd party hosting, since I already have a privately shared environment/server/directory and I can host/store the packages there.

推荐答案

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

I solved this problem in vue. But the steps should be pretty similar in react.

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

1. Create a project with your components (create-react-app should be fine. You will export your components only anyway, that's why the project setup is irrelevant. It is just useful for development and to test your components.)

2. 使用 rollup.js 捆绑您的 React 组件(网上教程很多，google一下rollup react组件库")

2. Use rollup.js to bundle your react components (there are many tutorials online, just google "rollup react component library")

3. 将新脚本添加到您的 package.json 以使用 rollup -c 捆绑您的应用.然后使用 npm pack 创建包.

3. Add a new script to your package.json to bundle your app using rollup -c.Then use npm pack to create the package.

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

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

This will create a zipped package with only the files you need with following pattern:

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

您可以通过修改 package.json 中的属性来影响 npm pack 的结果包，例如version"、name"、main"、files"会影响输出.

You can influence the resulting package of npm pack by modifying attributes in your package.json, e.g. "version", "name", "main", "files" will influence the output.

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

4. Now you can install your packages locally from another project:

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

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

This will add a new dependency to your package.json:

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

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

5. Based on your rollup setup you can then use your library like any other library:

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

您可能还需要导入样式:

You might also have to import the styles:

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

如果您需要对某个步骤进行更详细的说明，请在下方评论，我会添加更多信息.

If you need a more detailed explanation on a step, just comment below and I will add further information.

这篇关于如何创建一个可以在多个 React 项目中使用的私有共享组件库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！