WEBPACK和ROLLUP构建前端工具库
1. WEBPACK
- webpack 提供了构建和打包不同模块化规则的库，只是需要自己去搭建开发底层架构。
- vue-cli，基于 webpack ， vue-cli 脚手架工具可以快速初始化一个 vue 应用，它也可以初始化一个构建库。
2. ROLLUP
- rollup 是一个专门针对 JavaScript 模块打包器，可以将应用或库的小块代码编译成更复杂的功能代码。
- Vue、React 等许多流行前端框架的构建和打包都能看到 rollup 的身影。
ROLLUP 和 WEBPACK应用场景
- webpack 主要职能是开发应用，而 rollup 主要针对的就是 js 库的开发，如果你要开发 js 库，那 webpack 的繁琐配置和打包后的文件体积就不太适用了，通过 webpack 打包构建出来的源代码增加了很多工具函数以外的模块依赖代码。
- rollup 只是把业务代码转码成目标 js ，小巧且轻便。rollup 对于代码的 Tree-shaking 和 ES6 模块有着算法优势上的支持，如果只想构建一个简单的库，并且是基于 ES6 开发的，加上其简洁的 API，rollup 得到更多开发者的青睐。
rollup 全家桶
• rollup（工具库打包构建核心包）
• rollup-plugin-livereload（rollup 插件，热更新，方便本地 debugger 开发）
• rollup-plugin-serve（rollup 插件，本地服务代理，方便在本地 html 中调试工具）
• rollup-plugin-terser（rollup 插件，代码压缩混淆）
• rollup-plugin-visualizer（rollup 插件，可视化并分析 Rollup bundle，以查看模块占用）
• @rollup/plugin-babel（rollup 插件，rollup 的 babel 插件，ES6 转 ES5）
• @rollup/plugin-commonjs（rollup 插件，用来将 CommonJS 模块转换为 ES6，这样它们就可以包含在 Rollup 包中）
• @rollup/plugin-json（rollup 插件，它将.json 文件转换为 ES6 模块）
• @rollup/plugin-node-resolve（rollup 插件，它使用节点解析算法定位模块，用于在节点模块中使用第三方 node_modules 包）
• @rollup/plugin-typescript（rollup 插件，对 typescript 的支持，将 typescript 进行 tsc 转为 js）
typescript 相关
• typescript（使用 ts 开发工具库）
• tslib（TypeScript 的运行库，它包含了 TypeScript 所有的帮助函数）
• @typescript-eslint/eslint-plugin（TypeScript 的 eslint 插件，约束 ts 书写规范）
• @typescript-eslint/parser（ESLint 解析器，它利用 TypeScript ESTree 来允许 ESLint 检测 TypeScript 源代码）
文档相关
• typedoc（TypeScript 项目的文档生成器）
• gulp（使用 gulp 构建文档系统）
• gulp-typedoc（Gulp 插件来执行 TypeDoc 工具）
• browser-sync（文档系统热更新）
单元测试相关
• jest（一款优雅、简洁的 JavaScript 测试框架）
• @types/jest（Jest 的类型定义）
• ts-jest（一个支持源映射的 Jest 转换器，允许您使用 Jest 来测试用 TypeScript 编写的项目）
• @babel/preset-typescript（TypeScript 的 Babel 预设）
其他依赖
• eslint（代码规范约束）
• @babel/core（@rollup/plugin-babel 依赖的 babel 解析插件）
• @babel/plugin-transform-runtime（babel 转译依赖）
• @babel/preset-env（babel 转译依赖）
• chalk（控制台字符样式）
• rimraf（UNIX 命令 rm -rf 用于 node）
• cross-env（跨平台设置 node 环境变量）
参考资料
[1] rollup 英文文档（https://rollupjs.org/guide/en/#quick-start）
[2] rollup 中文文档（https://rollupjs.org/guide/zh/#introduction）
[3] Rollup.js 实战学习笔记（https://chenshenhai.github.io/rollupjs-note/）
[4] Rollup 打包工具的使用（https://juejin.cn/post/6844904058394771470）
[5] TypeScript、Rollup 搭建工具库（https://juejin.cn/post/6844904035309322254）
[6] 使用 rollup.js 封装各项目共用的工具包（https://juejin.cn/post/6993720790046736420）
[7] 如何开发一个基于 TypeScript 的工具库并自动生成文档（https://juejin.cn/post/6844903881030238221）
[8] 一款优雅、简洁的 JavaScript 测试框架（https://jestjs.io/zh-Hans/）