Rollup 是一个 JavaScript 模块打包工具，可以将多个小的代码片段编译为完整的库和应用。与传统的 CommonJS 和 AMD 这一类非标准化的解决方案不同，Rollup 使用的是 ES6 版本 Javascript 中的模块标准。最适合打包纯js开发的类库。
ES6 版本的 Javascript 最终带来了import和export的语法（ES6 Module，译者注），该语法可以让我们在多个脚本中共享函数和数据。有了 Rollup，你现在就可以放心地使用新的模块标准来书写代码，并将其编译为当前被广泛支持的 CommonJS、AMD 以及 IIFE 等导入风格的环境下的多种格式。
使用场景：
当需要构建复杂的应用时选择Webpack，因为它可以对所有的静态资源（ js / json / css / img / sass / less / …）进行模块依赖管理和项目代码分割。
如果要开发类js库时，那毫无疑问Rollup是最合适的选择，它可以做ES转换，模块解析，去除多余的代码等。
1 创建项目
新建一个空文件夹，例如起名：rollupTest，初始化项目
npm init -y
2 安装rollup
npm install rollup -S
3 创建rollup.config.js配置文件
这个配置文件并不是必须的，因为配置可选的配置文件的方式比较简单方便，所以我们选择配置文件。也可以不用配置文件，选择使用命令行来进行配置编译，命令行详见：rollupjs.org/guide/en/#c…
配置选项如下图所示：详情见：
// rollup.config.js
export default { // 可以是一个数组（用于多个输入的情况）
// 核心的输入选项
external,
input, // 必要项
plugins,
// 高级输入选项
cache,
onwarn,
preserveEntrySignatures,
strictDeprecations,
// 危险区
acorn,
acornInjectPlugins,
context,
moduleContext,
preserveSymlinks,
shimMissingExports,
treeshake,
// 实验性
experimentalCacheExpiry,
perf,
output: { // 必要项 (可以是一个数组，用于多输出的情况)
// 核心的输出选项
dir,
file,
format, // 必要项
globals,
name,
plugins,
// 高级输出选项
assetFileNames,
banner,
chunkFileNames,
compact,
entryFileNames,
extend,
footer,
hoistTransitiveImports,
inlineDynamicImports,
interop,
intro,
manualChunks,
minifyInternalExports,
outro,
paths,
preserveModules,
sourcemap,
sourcemapExcludeSources,
sourcemapFile,
sourcemapPathTransform,
// 危险区
amd,
esModule,
exports,
externalLiveBindings,
freeze,
indent,
namespaceToStringTag,
noConflict,
preferConst,
strict,
systemNullSetters
},
watch: {
buildDelay,
chokidar,
clearScreen,
skipWrite,
exclude,
include
} | false
};
我们的rollup.config.js配置，我们想要构建支持ES模块规范的 bundle 和能在 Node.js 中运行的 CommonJS 规范的 bundle，我们可以配置一个数组，可以配置不同的选项来打包不同的规范文件。plugins先不用管，后面会介绍到
export default [{
input: "./src/index.js",
output: [
{
dir: "dist",
format: "esm"
},
{
dir: "dist",
format: "cjs"
}
]
}]
4 编写打包文件
4.1 编写要打包的js文件
新建src/object/deepClone.js文件，进行编写一个深拷贝的js函数。
目录结构如下：
deepClone.js内容如下：
/**
* @desc 深拷贝，支持常见数据类型
* @param {Any} values
* @return {Any}
*/
export function deepClone(values) {
let copy;
// 处理简单数据类型
if (null == values || "object" != typeof values) return values;
// 处理时间
if (values instanceof Date) {
copy = new Date();
copy.setTime(values.getTime());
return copy;
}
// 处理数组
if (values instanceof Array) {
copy = [];
for (let i = 0, len = values.length; i < len; i++) {
copy[i] = deepClone(values[i]);
}
return copy;
}
// 处理Object类型
if (values instanceof Object) {
copy = {};
for (let attr in values) {
if (values.hasOwnProperty(attr)) copy[attr] = deepClone(values[attr]);
}
return copy;
}
throw new Error("Unable to copy values! Its type isn't supported.");
}
4.2 编写打包的 ./src/index.js 入口文件
export { deepClone } from "./object/deepClone"
5 集成插件
在 Rollup 中，不能“开箱即用”所有功能，所以我们需要添加配置一些插件完成我们需要的功能。
安装：
5.1 Babel
转换未被支持的ES6为ES5
npm install rollup-plugin-babel -S
5.2 @rollup/plugin-node-resolve
可以让 Rollup 查找到外部模块
npm install @rollup/plugin-node-resolve -S
5.3 @rollup/plugin-commonjs
用来将 CommonJS 转换成 ES2015 模块
npm install @rollup/plugin-commonjs -S
5.4 @rollup-plugin-terser
压缩代码
npm i rollup-plugin-terser -S
5.5 @rollup-plugin-cleanup
清楚无用的代码(注释)
npm i rollup-plugin-cleanup -S
暂时就介绍这么些，更多插件介绍请查看官方文档
配置：
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import {terser} from "rollup-plugin-terser";
import cleanup from "rollup-plugin-cleanup";
export default [{
input: "./src/index.js",
output: [
{
dir: "dist",
format: "esm"
},
{
dir: "dist",
format: "cjs"
}
],
plugins: [resolve(), commonjs(), terser(), cleanup()]
}]
6 添加打包脚本命令
在package.json中添加一条脚本
"scripts": {
"build": "rollup -c"
}
7 打包
运行构建命令：
npm run build
结果：
打包输出的文件在./dist中。
