你每天都在用element, antd，但组件库要对外提供什么吗

本文是基于Vite AntDesignVue打造业务组件库^[1]专栏第 11 篇，坚持就是胜利！

最近突然悟到：自己写文章太执着于在一篇文章中把一个事情从头到尾写清楚，这样就导致虽然我把事情讲完了，但是对读者来说不是很友好，因为大家很难有耐心看完几千字甚至更多文字，这样对你对我来说都不好，我得不到反馈，你看不到重点。

所以，接下来我打算改掉这个坏习惯，尽量能把一个问题拆解得简单化，通过一个总分(总)的结构分篇叙述问题，这样的写作过程我个人感觉也会更加轻松。

“写组件并不难，难的是打包！”这句话应该大部分人都深有体会，这里的打包并不仅仅是字面上的意思，而是从组件编写完毕到交付到用户手中能正常使用的所有工程化内容，这也是本专栏的核心之一。

这部分内容一篇文章说不清，所以咱们拆着慢慢看。

组件库要交付什么？

对于大部分前端来说，我们每天都在与组件库打交道，但你有没有思考过一个问题，假设让你做一个组件库，你要对外提供些什么？

我这里列举了一些关键内容：

• 符合模块规范的组件模块，这个是核心，必须有。

• 组件样式，组件一般都包含样式，这个也基本上有。

• 类型声明，如果要提供 TS 支持，这个也少不了，除非你不需要支持 TS。

• README，不算特别关键，愿意给就给，一般可能用官方文档网站的形式替代了。

• scripts，有的组件库可能会提供一些脚本，用于做一些自动化的辅助工作，这个按需提供，一般没有。

其中符合模块规范的组件模块，说白了就是一堆 JS，一堆符合 ESM/CJS/UMD 等模块规范的 JS，通常是每个组件有一组 JS 模块，整个库还有入口 JS。

样式要交付哪些内容呢？仅仅是提供 .css 文件吗？其实不然，考虑到调用方对工程能力的定制诉求，可能还会交付 .less/.scss/.stylus 等 CSS 预处理文件。

类型声明就是把 d.ts 这种文件交付给用户，这样人家才能用得爽，快速上手，配合 IDE 的类型支持，能马上知道这个组件支持哪些属性。

怎么交付？

在前面一些文章，我已经介绍了怎么构建函数库，比如在发布组件库之前，你需要先掌握构建和发布函数库^[2]这篇文章，其实就是为了做铺垫，因为做函数库比较单纯，主要就是处理 TS 和 JS。

而 UI 组件就复杂一点，除了 JS/TS，还涉及样式或者 DSL 的处理，是一个更复杂的工程。

以 Vue 为例，我们组件源码写的是 .vue，或者是 .jsx/.tsx。但是最终要交付出 js, css, d.ts 等格式的文件，这要怎么做呢？真让人头大，我们下篇文章接着讲。

参考资料

[1]

基于Vite AntDesignVue打造业务组件库: https://juejin.cn/column/7140103979697963045

在发布组件库之前，你需要先掌握构建和发布函数库: https://juejin.cn/post/7171792173984612366

END

如果觉得这篇文章还不错

点击下面卡片关注我

来个【分享、点赞、在看】三连支持一下吧

   “分享、点赞、在看” 支持一波