创建并发布你自己的 React 库

在软件开发中，我们通常会重复使用一些代码，并从中提取出在多个地方需要的部分。前端开发和 React 也不例外。因此，有时我们也想创建 React 库。在 React 中，库或包可以是任何东西，例如一个组件，一组组件，它们可以只是 UI 部分，也可以包含一些重复的逻辑。

第一章使用 create-react-library 创建你的库

创建 React 库的一个非常快速简单的方法是使用create-react-library。我们都知道create-react-app，create-react-library创建库也是同样如此。

要创建新库，只需运行：

npx create-react-library <LIBRARY_NAME>

我们将调用我们的bornfight-react-library命令，因此命令将是：

npx create-react-library bornfight-react-library

请注意将本文中出现的库名称替换为您的库名称。

然后，系统会要求您选择如图所示的几个选项。请务必选择：

就是这样，您已经创建了自己的 React 库。

在项目根目录下执行：

yarn start

目录中有 CRA example。它也可以通过执行以下命令来启动：

cd example
yarn start

如果您更喜欢使用 Storybook，您可以将其额外安装到 CRA 中：

cd example
npx sb init

这意味着您需要将故事与组件分开编写。

故事将位于目录中example，而组件则应在项目根目录中编写。否则，如果您想将 Storybook 安装在项目根目录中，则会破坏 CRA，因此不建议这样做。

发布 React 库意味着发布 Node 包。你可以将 Node 包发布到知名的公共仓库（例如npmjs.com），也可以发布到任何其他仓库（例如Github Packages）。

简单场景发布通常包括执行：

npm login
npm publish

有关出版的更多信息可在本章的其余部分找到。

-  "name": "bornfight-react-library",
-  "version": "1.0.0",

+  "name": "@bornfight/bornfight-react-library",
+  "version": "0.0.1",

否则，如果您想在您的帐户下发布它，只需忽略此步骤并保留不带组织前缀的包名称。

npm login

然后系统将提示您输入用户名、密码和电子邮件。

npm publish --access public

如果您不在组织下发布它，--access public则标记不是必需的，因为它将是默认选项。

"name": "@bornfight/bornfight-react-library",
"version": "0.0.1",
"repository": "https://github.com/bornfight/bornfight-react-library",

  "publishConfig": {
    "registry": "https://npm.pkg.github.com"
  }

npm login

然后系统将提示您输入用户名、密码和电子邮件。

使用Github 个人访问令牌作为密码。

npm publish