Javascript

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

本文主要是介绍教程:使用 react 和 rollup 创建自己的组件库,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

教程:使用 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

这篇关于教程:使用 react 和 rollup 创建自己的组件库的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!