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/）