React 组件库都是怎么打包的?

发表于 5天以前  | 总阅读数:46 次

大家都用过组件库,react 流行的组件库有阿里的 ant-design、字节的 semi-design、arco-design 等。

那这些组件库都是怎么打包的呢?

我们自己写个组件库的话,怎么写打包逻辑呢?

这篇文章我们就来探究下。

新建一个项目:

mkdir component-lib-test
cd component-lib-test
npm init -y

分别安装 ant-design、arco-design、semi-design

pnpm install antd
pnpm install @douyinfe/semi-ui
pnpm install @arco-design/web-react

npm、yarn 会把所有依赖铺平,看着比较乱。而 pnpm 不会,node_modules 下很清晰:

首先看下 antd,分为了 lib、es、dist 3 个目录:

分别看下这三个目录的组件代码:

lib 下的组件是 commonjs 的:

es 下的组件是 es module 的:

dist 下的组件是 umd 的:

然后在 package.json 里分别声明了 commonjs、esm、umd 还有类型的入口:

这样,当你用 require 引入的就是 lib 下的组件,用 import 引入的就是 es 下的组件。

而直接 script 标签引入的就是 unpkg 下的组件。

再来看看 semi-design 的:

也是一样:

只不过多了个 css 目录。

antd 没有这个目录是因为它已经换成 css in js 的方案了,不需要单独引入 css 文件。

然后是 arco-design 的:

也是一样:

同样是 lib、es、dist 3 个目录,同样是分别声明了 esm、commonjs、umd 的入口。

也就是说,组件库都是这样的,分别打包出 3 份代码(esm、commonjs、umd),然后在 package.json 里声明不同模块规范的入口。

那问题来了,如果我有一个 esm 的模块,怎么分别构建出 esm、commonjs、umd 的 3 份代码呢?

这个问题很容易回答。

umd 的代码用 webpack 打包就行。

esm 和 commonjs 的不用打包,只需要用 tsc 或者 babel 编译下就好了。

我们分别看下这三个组件库都是怎么做的:

先是 arco-design 的:

它的打包逻辑在 arco-cli 的 arco-scripts 下:

看下这个 index.ts

分别有 build 3 种代码加上 build css 的方法。

我们分别看下:

esm 和 cjs 的编译它封装了一个 compileTS 的方法,然后传入不同的 type。

compileTS 里可以用 tsc 或者 babel 编译:

tsc 编译就是读取项目下的 tsconfig.json,然后 compile:

babel 编译是基于内置配置,修改了下产物 modules 规范,然后编译:

babelConfig 里配置了 typescript 和 jsx 的编译:

再就是 umd:

和我们分析的一样,确实是用 webpack 来打包:

webpack 配置里可以看到,确实是为了 unpkg 准备的,用了 ts-loader 和 babel-loader:

而 css 部分则是用了 less 编译:

gulp 是用来组织编译任务的,可以让任务串行、并行的执行。

这里的 gulp.series 就是串行执行任务,而 gulp.parallel 则是并行。

所以说,那 3 种代码加上 css 文件是怎么打包的就很清晰了:

其中用到 gulp 只是用来组织编译任务的,可用可不用。

再来看下 semi-design 的:

它就没有单独分一个 xx-scripts 包了,直接在 semi-ui 的 scripts 目录下。

它也是用到了 gulp 来组织任务。

看下这个 compileLib 的 gulp task:

这里的 compileTSXForESM 和 ForCJS 很明显就是编译组件到 esm 和 cjs 两种代码的。

先用了 tsc 编译再用了 babel 编译:

然后是 umd,也是用了 webpack:

用了 babel-loader 和 ts-loader:

最后是 scss 的编译:

semi-design 把所有组件的 scss 都放在了 semi-foundation 这个目录下来维护:

所以编译的时候就是这样的:

就是把 semi-foundation 这个目录下的所有 scss 编译后合并成了一个文件

而 arco-design 的样式是在组件目录下维护的:

这个倒是没啥大的区别,只是编译的时候改下源码目录就好了。

这就是 semi-design 的 esm、cjs、umd、scss 是如何编译打包的。

和 arco-design 的 scripts 区别大么?

不大,只不过没有单独做一个 xxx-scripts 的包,编译出 esm 和 cjs 代码用的是 tsc + babel,而且用的是 scss 不是 less 而已。

再来看看 ant-design 的:

它也是单独分了一个包来维护编译打包的 scripts,叫做 @ant-design/tools。

它也有个 gulpfile 定义了很多 task

比如 compile 的 task 是编译出 es 和 cjs 代码的:

是不是很熟悉的感觉?

大家都是这么搞的。

它也是先用了 tsc 再用 babel 编译,最后输出到 es 或者 lib 目录:

打包 umd 代码的时候也是用了 webpack:

只不过它这个 webpack 配置文件是读取的组件库项目目录下的,而不像 arco-design 那样是内置的。

这就是这三个组件库的编译打包的逻辑。

区别大么?

不大,甚至可以说几乎一模一样。

总结

我们分析了 ant-design、semi-design、arco-design 组件库的产物和编译打包逻辑。

它们都有 lib、es、dist 目录,分别放着 commonjs、es module、umd 规范的组件代码。

并且在 package.json 里用 main、module、unpkg 来声明了 3 种规范的入口。

从产物上来看,三个组件库都是差不多的。

然后我们分析了下编译打包的逻辑。

ant-design 和 acro-design 都是单独抽了一个放 scripts 的包,而 semi-design 没有。

它们编译 esm 和 cjs 代码都用了 babel 和 tsc 来编译,只不过 arco-design 是用 tsc 或者 babel 二选一,而 ant-design 和 semi-design 是先用 tsc 编译再用 babel 编译。

打包出 umd 的代码,三个组件库都是用的 webpack,只不过有的是把 webpack 配置内置了,有的是放在组件库项目目录下。

而样式部分,ant-design 是用 css-in-js 的运行时方案了,不需要编译,而 arco-design 用的 less,样式放组件目录下维护,semi-design 用的 scss,单独一个目录来放所有组件样式。

并且编译任务都是用的 gulp 来组织的,它可以串行、并行的执行一些任务。

虽然有一些细小的差别,但从整体上来看,这三大组件库的编译打包逻辑可以说是一模一样的。

写这样的 scripts 麻烦么?

并不麻烦,umd 部分的 webpack 打包大家都会,而 esm 和 cjs 用 babel 或者 tsc 编译也不难,至于 scss、less 部分,那个就更简单了。

所以编译打包并不是组件库的难点。

如果你要写一个组件库,也可以这样来写 scripts。

https://mp.weixin.qq.com/s/hACjf-QUTC6TRRUs6g3znQ

 相关推荐

丽珠集团回应“涉及违规支出公关费用” :内部正在调查,费用占比是行业正常水平

8月7日消息,针对股价大跌和网传“涉及违规支出公关费用”的相关消息,丽珠集团公司认为今日的大跌属于近期医药行业反腐风暴逐渐加强,投资者情绪变化所致。

发布于:1月以前  |  262次阅读  |  详细内容 »

美国芯片巨头英特尔与中方合作!将在深圳新建芯片创新中心

据香港《南华早报》7月31日报道,英特尔与深圳合作,建立新的芯片创新中心以加深关系。

发布于:1月以前  |  233次阅读  |  详细内容 »

工信部要求开展 App 备案,微信小程序完成备案后才可上架

近日,工业和信息化部印发了《工业和信息化部关于开展移动互联网应用程序备案工作的通知》。

发布于:1月以前  |  213次阅读  |  详细内容 »

微信要做“小绿书”?知情人士:小范围内测,优化视频号图文发布及呈现

据网友爆料,微信正在灰度测试“小绿书”。从知情人士处了解到,这是一次非常小范围的内测,不是新功能,初衷就是为了更方便视频号创作者发布图文短内容,以及提高用户获得信息的效率。据知情人士介绍,视频号本身就可以发图片,这次内测只是把发布图片单独设计了一个按钮,在“看一看”那里可以集中查看而已。

发布于:1月以前  |  212次阅读  |  详细内容 »

X、马斯克寻求驳回有关前推特员工遣散费的诉讼

8月2日消息,社交媒体公司 X Corp周一向特拉华州威尔明顿联邦法院提交的一份文件中称,今年5月起诉该公司的六名前员工并非推特与马斯克旗下控股公司于2022年达成的合并协议的当事方,因此他们不能以涉嫌违反该协议为由起诉他们。

发布于:1月以前  |  210次阅读  |  详细内容 »

家乐福被裁员工曝未拿到补偿金,此前通知补偿金打6折一次性发和全款分12期之间二选一

据报道,近期,不少前家乐福员工爆料称,此前陆续接到裁员通知,给出的方案基本都是N的补偿费,但不少人却迟迟未拿到款项。据悉,被裁员工的工龄有长短,陆续都是在数月内被裁,补偿金在打6折一次性拿和全款分12期之间二选一。

发布于:1月以前  |  205次阅读  |  详细内容 »

OpenAI已注册GPT5商标

8月1日消息,OpenAI 今年 3 月推出了 GPT-4,成为“AI 模型”的代名词,甚至一度引发了业界恐慌,此前报道,以马斯克为首的科技圈人物要求“OpenAI 暂时停止研究 GPT-5 研发”。

发布于:1月以前  |  202次阅读  |  详细内容 »

特斯拉收购德国无线充电技术公司,未来或将投放相关产品

6月份关于特斯拉的一则收购传闻近日得到证实。当地时间7月31日,特斯拉确认已完成对德国无线充电技术公司Wiferion的计划收购,同时该公司更名为Tesla Engineering Germany GmbH。

发布于:1月以前  |  196次阅读  |  详细内容 »

全球勒索软件攻击创历史新高,美国是全球勒索软件攻击首要目标

Malwarebytes 的报告显示,全球勒索软件攻击呈现上升趋势。

发布于:1月以前  |  194次阅读  |  详细内容 »

美交管局对特斯拉部分车型展开调查,特斯拉部分车型被曝转向失灵

据报道,美国国家公路交通安全管理局8月1日表示,已对28万辆特斯拉Model 3和Model Y电动汽车展开调查,原因是这些车辆被曝存在转向失灵的情况。

发布于:1月以前  |  193次阅读  |  详细内容 »

时隔两年再战社交,腾讯内测「M8」APP

腾讯内部正在研发一款名为“M8”的社交APP,由QQ团队打造,定位是基于地图的虚拟社交产品,主攻年轻人社交赛道。据消息人士透露,产品或于8月份对外开启测试。

发布于:1月以前  |  189次阅读  |  详细内容 »

听歌时被银行AI骚扰电话打断,他起诉“索赔”110万元!

“在此事发生的过程中,本人正通过歌曲进行能力的激发,歌曲被打断,非但原有的效果并未达到,更让我承受了巨大的心理压力。”近日,一份题为“精神损害赔偿起诉状”的文字在社交平台上引发关注。市民辛先生在起诉状中表示,除了请法院判处被告向原告赔偿精神损失费10万元以外,还要求附带赔偿大卫·鲍伊演出名誉损失费100...

发布于:1月以前  |  187次阅读  |  详细内容 »

外媒:印度要求特斯拉效仿苹果,让其中国供应商与印企合资后再落地

据外媒8月1日报道,三位印度政府消息人士称,在特斯拉研究在印建厂之际,印度官员要求特斯拉效仿苹果公司,寻找印度当地公司与中国供应商合作。

发布于:1月以前  |  186次阅读  |  详细内容 »

世界首例自动驾驶致命车祸司机认罪:判处三年缓刑

8月1日消息,据报道,世界首起涉及自动驾驶汽车的致命碰撞事故日前进行了最终宣判,Uber自动驾驶汽车的安全员认罪并被判处三年缓刑。

发布于:1月以前  |  182次阅读  |  详细内容 »

全新声学攻击AI模型:从键盘敲击声窃取数据,准确率高达95%

近日,来自英国大学的一个研究团队训练了一种深度学习模型,该模型可以从使用麦克风记录的键盘敲击声音中,窃取数据,准确率高达95%。据称,此类攻击会严重影响目标的数据安全,它可能会将人们的密码、讨论、消息或其他敏感信息泄露给恶意第三方。

发布于:1月以前  |  180次阅读  |  详细内容 »

推特在苹果商店更名为X,X公司获得苹果首家单字符批准

7月31日,Twitter 应用在苹果 App Store 已经更名为 X,这意味着该公司可能获得了苹果的特批,因为此前 App Store 明确规定应用名称至少需要两个字母。

发布于:1月以前  |  180次阅读  |  详细内容 »

已拿下两家订单,零跑造车八年后开始技术输出

在7月31日举办的零跑汽车全新电子电气架构发布会上,零跑科技创始人、董事长、CEO 朱江明向现场媒体表示:" 零跑不仅要做一家汽车公司,还要做一家技术输出的公司。

发布于:1月以前  |  178次阅读  |  详细内容 »

小鹏汽车宣布严打占桩:超时占位每分钟收费1元

8日消息,小鹏汽车在其官方 App 上发布公告,指出公司将严打充电桩 “ 霸位 ” 行为。公告表示,近期发现一些车辆在充电站占桩不充电,或插枪不充电,浪费了宝贵的充电桩资源。为了解决这个问题,小鹏汽车已经加强了场站管理,全方位布局监控,检测场站情况,并增加了巡检次数。

发布于:1月以前  |  174次阅读  |  详细内容 »

蚂蚁集团以 6.28 亿美元出售印度“支付宝” Paytm 10.3% 股份,不再是其最大股东

8月7日消息,据外媒报道,蚂蚁集团旗下的一家子公司将出售印度最大的支付平台 Paytm10.3% 的股份,而 Paytm 的创始人兼 CEO Vijay Shekhar Sharma 将增持该股份,以简化该公司的所有权结构。消息公布后,Paytm 股价一度上涨 11.4%,今年以来该公司股价已经上涨了超过 50%。

发布于:1月以前  |  171次阅读  |  详细内容 »

周鸿祎:希望超级人工智能出来之后,先解决常温超导等问题而不是娱乐

8月8日消息,近日,周鸿祎在社交平台发文谈温室超导问题。他表示,最近室温超导比较火,室温超导技术的实现将对能源、电子、医疗、交通、AI等领域产生深远的影响。

发布于:1月以前  |  170次阅读  |  详细内容 »
 相关文章
 目录