08｜如何从零搭建自研的Vue组件库？
自研开发 Vue.js 3.x 组件库能带来什么？
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
本文详细介绍了使用Vue.js 3.x搭建自研组件库的关键技术要点。首先，通过monorepo管理组件代码，实现了多个子项目的依赖关系，为读者提供了一种高效的组件库开发和管理方式。其次，通过编译TypeScript和Vue.js 3.x源码为ES Module和CommonJS模块的两种JavaScript代码文件，实现了统一的组件格式和一一对应的功能源码文件和样式文件。最后，通过编译出所有JavaScript文件的TypeScript类型描述文件，为组件库的定制化需求提供了技术支持。 在讲解组件库开发要点时，重点介绍了支持组件的按需加载，以及在组件库发布到npm企业内部站点时的配置。通过示例代码演示了全量使用和按需使用组件库的方式，以及组件库开发的三个要素：monorepo管理、多种模块格式编译和基于Less等预处理CSS语言开发样式。这些技术方案是大厂内部和开源社区实现组件库的主流方案，为读者提供了实际的编译脚本实现和规范设计。 总结来说，本文带领读者学会了Vue.js 3.x自研组件库的开发入门，强调了自研组件库的重要性，以满足企业的定制化需求。同时，鼓励读者掌握本节课要点，为后续进阶学习打下扎实的技术基础。最后，提出了思考题，邀请读者参与讨论，为后续学习提供交流平台。 文章内容涵盖了组件库开发的关键技术要点，为前端开发者提供了深入学习Vue.js 3.x组件库开发的指导，以及满足定制化需求并提升技术水平的实际方法。
《Vue 3 企业级项目实战课》，新⼈⾸单¥59
全部留言(20)
- 最新
- 精选
ZR-rd提个建议：这么多文件配置完了但最后怎么用还是不太清楚。建议可以编写一个简单的组件进行示例，然后打包，发布，再在其他项目中引入使用，这样能够更清晰的了解组件库开发的整个流程作者回复: 您好，具体的使用方式在本课源码案例有说明指南哈。源码地址在这里 https://github.com/FE-star/vue3-course/tree/main/chapter/08
2022-12-16归属地：北京29- 风太大太大按需加载实现方式， 1. 文中提及的方案，手动按需加载。 import { Comp001, Comp002 } from '@my/components' import '@my/components/css/index.css' 2.社区还有一种方案，利用babel的能力，（babel-plugin-import） 代码的话就是 import { Comp001, Comp002 } from '@my/components'，安装了这个插件，可以不写引入css的文件，但其实本质还是工具帮我们做了引入的事情的事情，将多个文件打包成一个文件。 不过类似全量引入的情况，例如引用elementUi 如果一开始你就直接Vue.use(ElementUi)这样就起不到按需加载的作用了就是全量使用了，所以需要注意. 3.我观察到loadsh关于按需加载的其他方案，例如loadsh.throttle，代码如下：import throttle from loadsh.throttle。看了一下代码，这块应该是开发者二次再上传loadsh.throttle到npm里了，所以这块也增加了维护负担，部署loadsh的时候需要二次部署 坦白的说我，我心目中更友好的是方案3，需要我们上传npm包的时候上传写一段脚本，执行上传子包的地部署方案。最后代码如下，然后开发者使用的时候也是按需加载就可以了 import Comp001 from '@my/components.Comp001'
作者回复: 点赞
2022-12-09归属地：中国香港5 
海是蓝天的倒影`scripts/build-module.ts` 老师，源码打包编译成ES Module 和 CommonJS 模块两种代码的配置这块，可以详细讲下rollup执行过程吗？理解起来有点吃力作者回复: 您好， `scripts/build-module.ts` 这个脚本的编译步骤可以分成以下几点： 1. 用fast-glob模块来获取组件目录，也就是所有组件路径。 2. 把所有组件路径封装成Rollup编译入口。 3. 配置Rollup的编译配置，区分ESM和CJS两种输出结果。 4. 执行Rollup编译，编译出两种结果。
2022-12-13归属地：上海22
沉默的话唠
到第二步主package.json没贴出来，确实pnpm i 后，啥都没有，直接 Already up-to-date。 去看了下源代码的package.json 都是配好了的，第二步的时候是什么也不知道是什么。 细节流程呀，任重道远~作者回复: 您好，由于文章篇幅受限，代码太多无法全部贴出来，关于第8讲更多代码详情，可以看本课的在GitHub仓库上的源码案例 https://github.com/FE-star/vue3-course/tree/main/chapter/08
2023-02-16归属地：广西1
善良的老王我们公司就是按这种方式把elementPlus引入二开 看完这篇文章 再看公司的组件库 感觉豁然开朗 👍作者回复: 您好，本课程的自研组件库设计，也是参考了部分ElementPlus开源代码的设计。
2022-12-29归属地：四川1
落叶🍂建良子项目package.json声明, 是需要自己写吗?还是有快捷命令帮忙生成?作者回复: 您好，本课程代码案例使用pnpm来管理monorepo，最简单的操作是进入子项目进行初始化package.json和安装。 如果要更加便捷操作monorepo的子项目，可以使用lerna来管理monorepo子项目
2023-03-16归属地：广东2
浩明啦老师还有 side effect 的设置作者回复: 是的，借助package.json的配置来按需加载，这个需要npm模块能提供ES Modules格式的代码文件。
2023-02-16归属地：广东
Nexus丶三个脚本的import文件来源是哪里，突然冒出来一堆引用文件很迷呀。向类似import { resolvePackagePath } from './util';这个方法是哪来的具体是干嘛用的，有点看不懂作者回复: 所有课程代码的源码都在课程最后有链接哈
2023-01-13归属地：浙江
青丘老师，为什么rollup打包的时候设置了 `treeshake: false`。作者回复: 您好，这个源码案例的Rollup编译脚本，出于避免treeshake遗漏代码的考虑，因为treeshake并不是绝对准确的，如官方文档所述 https://www.rollupjs.com/guide/big-list-of-options#treeshake 。 可能你会觉得treeshake设置false会导致冗余代码，这个在本课可以不用担心，因为我源码有把每个组件进行独立编译，每个组件都是可以按需加载，间接也帮助使用者减少代码冗余。
2023-01-12归属地：广东
ZH 小小浩提个建议：本来就是冲着学习一下怎么自己从零搭建一个组件库买的这个课程，看完这篇发现写的有点太粗略了，相关的设计、配置文件都直接粘代码，也不讲解下这么多配置分别用来干嘛的...就看的挺迷的。嗯嗯嗯...也可能是自己这方面的知识储备不够作者回复: 可以对照着github的完整代码去调试，如果不懂建议在github按行写issue提问，这样好弄清是什么不太清楚，也较好去解答
2022-12-25归属地：北京2