【实战篇】最详细的Rollup打包项目教程

介绍

本文带你一起使用 Rollup 打包项目，实现以下功能：

• 自动将 dependencies 依赖声明为 externals
• 支持处理外部 npm 依赖
• 支持基于 CommonJS 模块引入
• 支持 typescript，并导出声明文件
• 支持 scss，并添加前缀
• 支持自动清除调试代码
• 打包输出文件保留原始模块结构
• 支持按需加载

一、什么是 rollup

rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。

二、为什么是 rollup

为什么是 rollup 而不是 webpack 呢？

rollup的特色是 ES6 模块和代码 Tree-shaking，这些 webpack 同样支持，除此之外 webpack 还支持热模块替换、代码分割、静态资源导入等更多功能。

当开发应用时当然优先选择的是 webpack，但是若你项目只需要打包出一个简单的 bundle 包，并是基于 ES6 模块开发的，可以考虑使用 rollup。

rollup 相比 webpack，它更少的功能和更简单的 api，是我们在打包类库时选择它的原因。

三、支持打包的文件格式

rollup 支持的打包文件的格式有 amd, cjs, es\esm, iife, umd。其中，amd 为 AMD 标准，cjs 为 CommonJS 标准，esm\es 为 ES 模块标准，iife 为立即调用函数， umd 同时支持 amd、cjs 和 iife。

四、快速开始

1. 安装

npm install --global rollup 

2. 基础打包

新增文件 src/main.js：

// src/main.js
import foo from "./foo.js";
export default function () {console.log(foo);
} 

新增文件 src/foo.js：

export default "hello world!"; 

项目根目录下新增文件 rollup.config.js：

export default {input: "src/main.js",output: {file: "bundle.js",format: "cjs",},
}; 

运行命令：

rollup -c 

得到产物 bundle.js：

"use strict";

var foo = "hello world!";

// src/main.js
function main() {console.log(foo);
}

module.exports = main; 

这时我们使用 Rollup 将 src/main.js、src/foo.js打包成功，完成了第一个 bundle，。

3. 引入外部资源

更新 src/main.js，添加外部资源 lodash-es 引入：

// src/main.js
import foo from "./foo.js";

import { sum } from "lodash-es";

export default function () {console.log(foo);console.log(sum[(1, 2)]);
} 

再次打包 rollup -c，发现有报错 (!) Unresolved dependencies：

这是因为当项目中引入外部资源时，如 npm 包，rollup 不知道如何打破常规去处理这些依赖。

有 2 种方法引入外部资源：

• 添加插件 @rollup/plugin-node-resolve 将我们编写的源码与依赖的第三方库进行合并；
• 配置 external 属性，告诉 rollup.js 哪些是外部的类库。

3.1 resolve 插件

@rollup/plugin-node-resolve 插件让 rollup 能够处理外部依赖。

安装：

yarn add @rollup/plugin-node-resolve -D 

更新 rollup.config.js：

import resolve from "@rollup/plugin-node-resolve";
export default {