标签:教程 创建 rollup 插件 react 使用 组件 我们
教程:使用 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
标签:教程,创建,rollup,插件,react,使用,组件,我们 来源: https://www.cnblogs.com/amboke/p/16691511.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。