教程：使用 react 和 rollup 创建自己的组件库

作为软件工程师，我们喜欢使用组件，因为它们可以帮助我们快速编码、提高生产力并缩短开发时间。我使用的常见库之一是 材质界面 .但是你有没有想过它们是如何构建和维护的？

如果您的开发团队正在成长并且您不希望在您的存储库中配对代码，您应该尽早在您的代码变得无法管理之前开始创建一个组件库。让我们看看如何。

一点介绍

你好，我在 mez.ink ,

mez.ink

我在这里领导前端。我们为 100K+ 微型网站提供服务，满足每月 1000 万的流量。我们使用的技术栈是 NextJS、React、GoLang、AWS 等等。

在前端，我们有多个页面的不同存储库，例如
– 个人资料页面。
– 静态网站和
– 网络仪表板。

上述每个存储库的大小都在迅速增长，我们每周都在添加新功能，因此管理可重用组件、它们的功能和样式指南非常困难。我们的很多设计在代码库中都是相似的，比如页眉、页脚、按钮等。所以我们想出了一个想法来创建自己的组件库。

先决条件

您应该是前端开发人员并且绝对知道

• 新PM
• 吉特
• 反应

好的，让我们首先创建一个名为 my-super-library 的目录并使用以下命令初始化项目

这将为您创建一个带有项目名称和版本等的 package.json。现在是时候为我们的库安装一些依赖项了。

创建组件

让我们创建一个带有一些导航链接和徽标的标题。我们将首先创建一个如图所示的文件夹结构

好吧，不必具有与所示相同的文件夹结构，您也可以创建不同的结构。

好的，让我们从一些开始，您可以简单地将以下代码复制并粘贴到您的文件中，因为它是不言自明的

• src/index.ts

  从’./components’导出*；

• src/components/index.ts

  从 ‘./Header’ 导出 { 默认为 Header }；

• src/components/Header/index.ts

  从’./Header’导出{默认}；

让我们为 Header 组件编写一些代码，我们将使用 React 和 Emotion 来创建它们。

为了保持简单，我创建了一个带有徽标和一些链接的标题，对于样式，我使用了 css-in-js ( 感情 )

上面的代码非常简单，我们只是在编写一些 CSS，并使用情感创建了一些样式组件。我们将在本文的后半部分讨论如何为模块库设置情感。

添加打字稿

我们还没有在我们的项目中初始化打字稿。让我们用一个简单的命令来做

 npx tsc --init

这将创建一个 tsconfig.json 文件位于我们项目的根目录，它包含一些 Typescript 的默认规则。你可能不需要我分享的所有选项 tsconfig 文件，您可以将其用于您的项目或根据需要进行编辑。

如果您注意到第 20 行，这是可选的，如果您使用情感库进行样式设置，则这是必需的，其余规则非常常见且不言自明。

设置汇总

让我们添加 卷起 对于我们的项目，如果你没有听说过，这和 webpack 非常相似。两种工具都可以做同样的工作，但 webpack 用于捆绑应用程序，而 rollup 最适合捆绑库。这就是我选择上卷的原因。 Rollup 也像 webpack 一样使用插件，对于这个项目，我们将使用一些插件进行捆绑。

• @ 汇总/插件节点解析
• @ 汇总/插件打字稿
• @ 汇总/插件-commonjs
• 汇总插件-dts
• 汇总插件 postcss
• rollup-plugin-terser
• rollup-plugin-peer-deps-external

有了它，让我们安装汇总及其插件

 npm install rollup @rollup/plugin-node-resolve @rollup/plugin-typescript @rollup/plugin-commonjs rollup-plugin-dts --save-dev

让我们创建一个 rollup.config.js 在我们项目的根目录中。我们将添加一些配置来捆绑我们的库。

在文件中，我们正在导入我们安装的插件。
我们也进口了 包.json 将变量引用到输出 cjs 和 esm 捆绑。
这 src/index.ts 是我们导出所有组件的库的入口文件。我们将同时创建 es6 和 常见的 为我们的用户提供模块，以便他们可以选择最适合他们的方式。
我们在导出的数组上有两个配置对象。

• 这首先定义了我们库的实际 Javascript 代码是如何生成的。 （参考第 17 行）
• 第二个对象定义了我们的库类型如何分布和使用 dts 插件来做到这一点。 （参见第 42 行）

哦，我们还没有添加 主要的 和 模块 里面的钥匙 包.json 如第 21 行和第 26 行所述。所以我们的 package.json 看起来像

这是 包.json 我们用于本教程的文件。

几件事要记住

• “main” — commonjs 模块的输出路径
• “module” – es6 模块的输出路径
• “files”——我们整个库的输出目录
• “types”——我们图书馆类型的位置
• “scripts”——还定义了一个新的脚本，叫做 卷起 .这将使用 -c 标志运行汇总包，这意味着“使用汇总配置文件”。所以运行这个将是 npm 运行汇总 .

如果上述所有设置都完成了，我们可以通过运行来构建库
npm 运行汇总 如果一切配置正确，汇总将运行而不会出现错误，您将看到 距离 在项目根目录创建的目录。

发布图书馆

库已创建，是时候发布并使用它了。为了发布，我们将使用 NPM 和 GitHub 来托管相同的内容。

在发布之前让我们在 GitHub 上创建一个存储库，你可以随意命名，我已经命名了 我的组件 .
由于我们已经准备好代码，请查看 GitHub 上有关如何在新存储库中提交代码的说明。

现在我们需要使用以下更改更新 package.json 文件

如您所见，我们使用我们选择的 repo 名称更新了名称，还添加了有关我们的库托管位置的注册表信息。
即使完成了所有这些步骤，我们仍然没有发布包。为此，我们需要在本地 NPM 中添加一些配置和设置。

.npmrc 文件的作用

我们需要对 .npmrc 文件。它位于系统级别，必须存在于主目录中，您可以通过以下方式打开或创建它 我们~./npmrc .以下是您需要粘贴的代码 .npmrc

 注册表=https://registry.npmjs.org/  
 @YOUR_GITHUB_USERNAME:registry=https://npm.pkg.github.com/  
 //npm.pkg.github.com/:_authToken=YOUR_AUTH_TOKEN

确保替换 YOUR_GITHUB_USERNAME 和 YOUR_AUTH_TOKEN。我们还没有创建身份验证令牌。创建一个非常简单，登录到您的 Github 个人资料：转到设置 -> 开发人员设置 -> 个人访问令牌，然后单击 生成令牌 .

给它一个与您的项目描述相匹配的名称。创建后，令牌将仅显示一次。将其复制并保存在您的笔记或某个文件中。将 AAUTH_TOKEN 替换为生成的令牌。

所有东西都设置好了。现在您可以运行以下命令

是的，我们刚刚发布了我们库的第一个 0.0.1 版本。

要确认这一点，您可以转到您的 GitHub 仪表板并单击“包”，您可以检查所有已发布的包。

使用我们的图书馆

我们的图书馆已经上线，现在我们想利用它。但这里有一个问题，如果你的包是一个私有包，当人们尝试安装它时，他们会得到一个 404 错误。
这些用户需要添加 ~/.npmrc 文件与我们之前添加的相同信息。
但是如果它是一个公共包，只需使用基本命令即可安装非常简单

npm install @aatif/my-components --save

现在转到您已安装此库的项目，并可以开始使用我们的组件，如下所示：-

当您运行项目时，您将看到标题。

恭喜！我们现在拥有使用 Typescript 创建和分发 React 组件库的所有工具！

我希望您对创建和发布库有很好的了解。
在下一篇文章中，我们将学习如何设置组件样式并使用故事书为库创建帮助指南 .

如果你喜欢这个，请务必关注我 ** 推特** ** ！并订阅我的 ** 大的** ** 更多更新。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/35094/14071400