rollup.js 一个简单实用的打包工具
最近在看vue3相关的知识的时候，发现了一个新的打包工具，至少于我而言是新鲜的。它就是rollup.js。一说到JS打包、合并、压缩、模块处理等都会想到webpack，这是王者，当然入门的难度偏高。而vue3中搭配的vite运行速度确实非常快，里边有很多的rollup.js相关的回调函数。而我们今天就来简单的看看rollup.js打包神器。官网地址为Rollup | Rollup
简介
Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application.
Rollup是一个用于JavaScript的模块打包器，它将多数小块代码编译成更大、连续的代码。因为浏览器是需要有一个整体脚本（代码文件）才能够运行的，对于一个集合的项目、产品，浏览器没有相关的合并功能。
浏览器需要脚本打包，主要原因有三个。
（1）早期的浏览器不支持模块，大型网页项目只能先合并成单一脚本再执行。
（2）Node.js 的模块机制与浏览器不兼容，必须通过打包工具进行兼容处理。
（3）浏览器加载一个大脚本，要比加载多个小脚本，性能更好。
安装
npm install --global rollup这样安装可以让 Rollup 成为全局可用的命令行，你也可以仅将其安装于本地
npm install rollup --save-dev也可以不安装直接使用，就是把下面所有命令中的rollup，替换成npx rollup（参见《npx 使用教程》）。
第一次使用，可以运行下面的命令，查看一下帮助。
$ rollup --help
# 或者
$ npx rollup --help配置rollup.config.js文件
Rollup 使用一个 rollup.config.js 文件进行配置。
// rollup.config.js
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'umd'
}
};配置跟其他工具基本一致，从入口文件 index.js 打包后输出文件 bundle.js。format 是生成包的格式，可选有 amd,cjs,es,iife,umd，umd 是通用模块定义，打包后可以通过 <script> 标签引入，也可以通过 import 等方式引入，作为一个 JS 库要适用各个场景，应选择 umd 。
babel
Rollup 通过插件在打包的关键过程中更改行为，babel的插件就是 rollup-plugin-babel，需要先安装相关依赖
npm i rollup-plugin-babel@latest @babel/core @babel/preset-env -D新建 .babelrc 文件，配置 babel
{
"presets": ["@babel/preset-env"]
}代码压缩
npm i rollup-plugin-uglify -D因为 rollup-plugin-uglify 无法压缩 ES6 的语法，所以必须先用 babel 转。如果想直接压缩 ES6 的语法，可换成 rollup-plugin-terser
ESLint
规范代码，书写规则。
npm i rollup-plugin-eslint -D然后初始化生成一个 ESLint 配置文件 ./node_modules/.bin/eslint --init
那么最终的 rollup.config.js 配置文件如下：
import babel from 'rollup-plugin-babel';
import { uglify } from 'rollup-plugin-uglify';
import { eslint } from "rollup-plugin-eslint";
export default {
input: './index.js',
output: {
file: 'dist/bundle.js',
name: 'People',
format: 'umd'
},
plugins: [
eslint({
fix: true,
exclude: 'node_modules/**'
}),
babel({
exclude: 'node_modules/**'
}),
uglify()
]
};例子
下面，就用 rollup.js 打包两个简单的脚本：库文件 a.js 和入口脚本 main.js。
// a.js
const PI = 3.1415;
const E = 12.718;
export function aPi(x) {
return 2*x + PI;
}
export function aE(x) {
return 2*x + E;
}// main.js
import { aPi } from './a.js';
console.log(aPi(102));$ rollup main.js打包时只需给出入口脚本 main.js，rollup 会自动把依赖项打包进去。
打包结果默认输出到屏幕。
打包结果如下所示：
const PI = 3.14;
function aPi(x) {
return x + PI;
}
console.log(aPi(10));使用参数--file [FILENAME]，将打包结果保存到指定文件。
$ rollup main.js --file bundle.js打包结果会根据引用来进行打包，把没有用到的方法、代码剔除，从而使代码更加简洁。
转成 CommonJS 模块
rollup 还支持 ES 模块转成 CommonJS 模块，使用参数--format cjs就可以了。
$ rollup add.js --format cjs当然，rolljs的功能还有很多，比如如何添加typescript，如何开发插件，摸索一下就可以了。基本上来说不会特别复杂。
借鉴文章
打包工具 rollup.js 入门教程 - 阮一峰的网络日志