前端工程化10：Rollup从零搭建组件库/工具库，npm包打包发布实战
文章目录
- 前端工程化10：Rollup从零搭建组件库/工具库，npm包打包发布实战
- 前言
- 一、Rollup核心优势与适用场景
- 1. 核心特点
- 2. 明确使用场景
- 二、项目初始化与环境搭建
- 1. 创建项目结构
- 2. 安装核心依赖
- 三、编写基础测试库代码
- 四、编写Rollup基础打包配置
- 五、配置打包运行脚本
- 脚本说明
- 六、运行打包命令
- 1. 本地开发监听
- 2. 正式打包构建
- 七、本地调试库文件
- 八、配置package.json库发布规范
- 九、npm包完整发布流程
- 十、Rollup常用扩展配置
- 1. 支持编译TS
- 2. 打包剔除外部依赖
- 文末总结
前言
前面我们学完Webpack业务项目搭建、Vite现代化项目开发，这两款工具都偏向于业务系统开发。
如果我们想要开发通用工具函数库、UI组件库、公共SDK，再用Webpack或者Vite打包就显得臃肿冗余，产物体积大、冗余代码多。
在前端领域，类库、组件库统一使用Rollup打包，Vue源码、React源码、Element Plus、Ant Design等主流开源库，底层全部依靠Rollup实现打包输出。
本篇从零上手Rollup，完成环境搭建、配置编写、多格式产物打包、代码压缩、环境区分，最后手把手实现本地调试与正式发布npm包，完整掌握前端开源库开发全流程。
一、Rollup核心优势与适用场景
1. 核心特点
- 专注ES模块化，打包产物纯净无多余运行时代码
- 原生强力支持Tree-Shaking，自动剔除未使用代码
- 配置简洁轻量化，学习成本远低于Webpack
- 支持输出多种规范产物：ESModule、CommonJS、UMD
- 打包体积小，适合上传npm作为公共依赖使用
2. 明确使用场景
- 开发通用前端工具函数库
- 封装企业内部公共UI组件库
- 编写前端SDK、埋点库、请求封装库
- 开源共享类库、插件类项目
