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 入门教程 - 阮一峰的网络日志

简介 | rollup.js 中文文档 | rollup.js中文网

Rollup.js: 开源JS库的打包利器_南乔几经秋的博客-CSDN博客_rollup.js