基于Rollup搭建类库模板技术.pdfVIP

技术要点：Rollup

前言

工欲善其事，必先利其器。做好一个项目前期准备工作很重要，前期准备无非就是

合理规划项目结构、按需编写构建代码、批量创建文件、按需封装工具函数等，

而按需封装工具函数是项目基础的重中之重，是很有必要提前规划的。

这些经常重复使用的工具函数，包括但不限于浏览器类型、格式时间差、URL参数反

序列化、过滤XSS等。为了避免应用开发时重复的粘贴操作带来不必要的麻

烦，有些开发者都会将这些工具函数根据功能划分并统一封装，再发布到Npm公有仓

库。每次使用时直接安装，提升开发效率，将时间用在正确的事情中。

webpack长期霸占打包领域的，得以其强大的生态系统，很多前端应

用都基于webpack打包，因此很多类库在早期也选择webpack作为打包工具。随着

前端技术的大力发展，近几年也涌现出像rollup、esbuild和parcel这样的优秀

打包工具，每个工具都具备自己的特色且在某些应用场景占据一定的优势，因此

webpack的地位也受到，形成一超多强的局面。

虽然webpack蚕食大量打包市场份额，但也不是所有情况都适用webpack。在某些

应用场景使用webpack打包代码也可能很多问题，例如大量无用代码，随

着项目体积增大导致打包速度过慢、打包时间过长和打包体积过大。

基于上述，现在很多类库都会选择rollup打包代码，这些类库包括但不限于组

件库与工具库，其共是包括以JS为主的代码，因此资源类型不会像应用那样复

杂，所以对于单一类型单能的项目，使用rollup打包代码会更好，而rollup

也是为JS类库打包而生。本章将带领你基于Rollup类库基建模板，通过了解

rollup打包思想，一步一步上手rollup，完成一个通用工具库的前端工程化模

板。

在此提个醒，本课程的是前端工程化，因此不会展开编写业务代码，只会集中篇幅讲述前端工程化相关代

背景：背景：Rollup

rollup是一个JS模块打包器，可将小块代码编译为大块复杂代码。与webpack偏

向于应用打包的定位不同，rollup更专注于类库打包。像常见前端框架react与

vue，其源码都是基于rollup打包的。

为何都是打包，而像react与vue都优先选择rollup？总体来说webpack与

rollup都可基于自己特性在不同应用场景发布自身的优势作用。

webpack内置的分割代码、按需加载、HRM等特性在打包应用时有着的优势，

而rollup并不支持这些功能，因此在打包应用时需配合很多第插件才能完成，

而本身rollup的生态系统并不强大，第插件不齐全，部分插件也得不到很好的

，因此rollup无法支撑一个应用的打包功能。

但rollup也并不是一无是处，其内置的ES6解析、摇树优化、作用提升等特性在

打包类库时有些的优势，若你的项目是一个组件库或工具库，而这些单一类型

单能的项目只需输出一个或多个不同规范的bundle文件供其他应用，那使

用rollup再也适合不过了。

特性

因为rollup配置简洁、性能到位和功能专一的特性，webpack在v2也开始借鉴摇

树优化、作用提升等先进特性。

摇树优化

rollup在普通情况下，必须使用ESM编码，而不是以前的模块规范CJS或AMD。

在使用ESM编码的基础上，rollup会静态分析代码中的import并将删除所有未实

际使用的代码。这允许架构在现有模块中，而不会增加额外依赖或项目体积。

因为rollup只最基本最精简的代码，所以可生成轻量快速低复杂度的类库。这

种基于显式import/export的方式，远比在编译后bundle文件中简单地运行压

缩程序自动检测未使用的变量更有效。

摇树优化就是TreeShaking，可查看《TreeShaking实现原理》好好了解其原理，在

此不深入讲述了。

模块兼容

虽然rollup在普通情况下必须使用ESM编码，但很多古老的Npm模块都是基于CJS

编码，贸贸然这些Npm模块肯定会在打包流程中报错，因此推荐使用

@rollup/plugin-commonjs解决这些问题。

使用

rol