可以将项目中的细小模块打包成整块代码，使得划分的模块可以更好的运行在浏览器环境或者是Nodejs环境，开源类库优先选择，rollup没有太多优化型的功能，以ESM标准为目标的构建工具。

rollup处理过程

rollup处理过程

输出不同风格的文件

--format/-f <module type>

rollup -i <input file> --file <output file> --format <module type>
module type: 输出的文件类型 (amd, cjs, esm, iife, umd)，默认为esm

• iife: 立即执行函数
• cjs：common js，require形式
• es: es module, import形式
• umd: 兼容cjs、amd、iife，满足不同环境都可运行，当输入为umd格式的文件时需要指定name：-n xxx输入内容将会挂为全局对象xxx下global.xxx，在页面内从window对象下获取

常用命令

// 帮助
rollup -h
// 版本
rollup -v
// 单入口文件打包
rollup -i <input file> --file <output file>
// 多入口文件打包
rollup -i <input file 1> -i <input file 2> -d <dir>
// 监听入口文件变化自动打包
rollup -i <input file> --file <output file> -w

// 配置文件方式写，命令和配置文件里的配置项是一一对应的
// rollup.config.js
export default { 
  input: <input file>,
  output: {
    file: <output file>,
    format: <module type> 
  }
}
rollup -c rollup.config.js
// 指定环境变量，区分环境，根据环境自定义配置 
rollup -c rollup.config.js --environment MODE:local
// rollup.config.js
console.log(process.env.MODE) // local

// 使用全局插件
rollup -c rollup.config.js -p <plugin>
// 使用项目里安装的局部插件
./node_modules/.bin/rollup -c rollup.config.js -p <plugin>

常用插件

⚠️ rollup插件是根据数组顺序执行，添加插件时注意调整插件的执行顺序。

@rollup/plugin-json

引入json文件，将文件内容转换成Object。
yarn add -D @rollup/plugin-json

// rollup.config.js(省略其他配置项)
import json from '@rollup/plugin-json'
plugins: [json()]

@rollup/plugin-node-resolve

把import的内容注入包里,webpack默认有这个功能，rollup需要使用插件来实现，引入在rollup里默认的表现为：

// index.js
import Vue from 'vue';
// dist.js 打包后的文件还是为
import Vue from 'vue';

需要从node_modules里动态取，如果需要在编译的过程中把依赖注入到文件里，使用@rollup/plugin-node-resolve后会把依赖打包进来。
yarn add -D @rollup/plugin-node-resolve

// rollup.config.js(省略其他配置项)
import resolve from '@rollup/plugin-node-resolve'
plugins: [resolve()]

@rollup/plugin-commonjs

有些依赖的bundle是cjs形式的(例如 react)，使用@rollup/plugin-node-resolve之后还是不能正常引入内容，需要借助@rollup/plugin-commonjs才能正常引入cjs类型的依赖。
yarn add -D @rollup/plugin-commonjs

// rollup.config.js(省略其他配置项)
import commonjs from '@rollup/plugin-commonjs'
plugins: [commonjs()]

rollup-plugin-terser

打包完成之后压缩代码。
yarn add -D @rollup/plugin-terser

// rollup.config.js(省略其他配置项)
import terser from '@rollup/plugin-terser'
output: {
  plugins: [terser()],
},

alias：@rollup/plugin-alias

对应webpack里的resolve.alias配置项，对引入路径/文件映射到自定义的名称/路径上。
yarn add -D @rollup/plugin-alias

// rollup.config.js(省略其他配置项)
import alias from '@rollup/plugin-alias'
plugins: [
  alias({
     entries: {
        '@': './src'
     }
  })
]

babel：@rollup/plugin-babel

代码编译的工具，es6/es7... --> es5。
yarn add -D @rollup/plugin-babel

// rollup.config.js(省略其他配置项)
import { babel } from '@rollup/plugin-babel'
plugins: [ babel({ babelHelpers: 'bundled' }) ]

replace：@rollup/plugin-replace

对应webpack里的defineplugin，把环境变量替换设置的参数。
yarn add -D @rollup/plugin-replace

// rollup.config.js(省略其他配置项)
import replace from '@rollup/plugin-replace'
plugins: [
  replace({
    'process.env.NODE_ENV': JSON.stringify('production'),
  })
]

typescript：@rollup/plugin-typescript

允许编写ts文件，支持ts语法。
yarn add -D @rollup/plugin-typescript typescript tslib

// rollup.config.js(省略其他配置项)
import ts from '@rollup/plugin-typescript'
plugins: [ts()]

babel 也有编译ts的功能，只编译语法，不做类型校验，推荐使用 @rollup/plugin-typescript，它还是通过typescript包进行编译，对ts语法支持是最好的。

非官方插件 typescript2：rollup-plugin-typescript2

Rollup plugin for typescript with compiler errors.
This is a rewrite of the original rollup-plugin-typescript, starting and borrowing from this fork.
This version is somewhat slower than the original, but it will print out TypeScript syntactic and semantic diagnostic messages (the main reason for using TypeScript after all). -- 官网说明

这是对原版 rollup-plugin-typescript的重写，从这个 fork开始和借用。

这个版本比原来的版本要慢一些，但它会打印出 TypeScript 语法和语义诊断信息（毕竟是使用 TypeScript 的主要原因）。

eslint: @rollup/plugin-eslint

打包的时候增加eslint语法校验。
yarn add -D @rollup/plugin-eslint eslint

// rollup.config.js(省略其他配置项)
import eslint from '@rollup/plugin-eslint'
plugins: [eslint()]

image: @rollup/plugin-image

处理图片类型文件倒入。
yarn add -D @rollup/plugin-image

// rollup.config.js(省略其他配置项)
import image from '@rollup/plugin-image'
plugins: [image()]

strip: @rollup/plugin-strip

treeshaking掉console的内容，及只有console里使用过的变量，如果想要控制代码里是否包含console推荐把是否允许console放到eslint里配置。
yarn add -D @rollup/plugin-strip

// rollup.config.js(省略其他配置项)
import strip from '@rollup/plugin-strip'
plugins: [strip()]

常用配置项

external

当我们使用了 @rollup/plugin-node-resolve 之后有些依赖不想打包进来，使用到的时候再从node_modules引入，怎么办呢？
配置external：将不想在编译阶段打包进来的依赖配置在external里。

// rollup.config.js
{
  external: ['vue']
}

插件通用配置

• include：需要处理的文件
• exclude：不需要处理的文件

Hooks

类似vue的生命周期，打包也有不同的结点，各个阶段对应不同的Hook，运行到某个节点的时候会自动执行插件对于当前节点的功能逻辑，得到新的结果。

常见的Hook

build阶段的Hook：

• options：第一个执行的Hook，一般用作插件配置的预处理，插件内部的属性/方法初始化
• buildStart：构建代码之前触发的Hook，一般用作解析用户传入的配置项
• buildEnd：构建代码完成时触发的Hook
• resolveId：解析文件路径的Hook
• transform：处理代码的Hook
• moduleParsed：transform之后，当前module解析完成会得到当前module引入了其他module，引入的其他 - module也要重新执行resolveId、load、transform的逻辑

output阶段的Hook：

• outputOpions: 对应build阶段的options
• renderStart: 对应build阶段的buildStart
• renderChunk: 处理代码的Hook

rollup插件简析

插件不一定是一个方法，用方法实现是为了能传递配置项，插件会返回一个对象，插件真正的主体是一个rollup能理解的对象，以@rollup/plugin-alias为例：

options(入参)：用户自定义配置
name(推荐写)：插件的名称，方便rollup运行插件出错时报错带上name更好的调试问题
buildStart：inputOptions：rollup整体配置，也就是rollup.config.js文件export的对象
resolveId：把自定义的名称/路径替换成真正的路径
id：对于文件统一的概述，每个文件对应一个id
importee：自定义的名称/路径
importer：引入了自定义的名称/路径的文件