Rollup 简介 #

┌─────────────────────────────────────────────────────────────┐
│                         Rollup                               │
├─────────────────────────────────────────────────────────────┤
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  ES模块优先   │  │ Tree-shaking│  │  输出格式    │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐         │
│  │  插件系统    │  │  代码分割    │  │  高性能     │         │
│  └─────────────┘  └─────────────┘  └─────────────┘         │
└─────────────────────────────────────────────────────────────┘

2015年 ─── Rollup 项目启动
    │
    │      Rich Harris 开发
    │      专注于 ES 模块打包
    │
2016年 ─── Tree-shaking 革命
    │
    │      引入革命性的 Tree-shaking
    │      消除未使用的代码
    │
2017年 ─── 生态系统扩展
    │
    │      插件系统完善
    │      社区快速增长
    │
2018年 ─── 代码分割支持
    │
    │      动态导入支持
    │      更灵活的输出配置
    │
2020年 ─── Rollup 2.0
    │
    │      性能大幅提升
    │      更好的 Source Map
    │
2023年 ─── Rollup 3.0
    │
    │      原生 ESM 支持
    │      改进的插件 API
    │
至今   ─── 行业标准
    │
    │      Vue、React 等库的选择
    │      Vite 的底层引擎

// CommonJS 模块
const lodash = require('lodash');
const result = lodash.merge({}, { a: 1 });

// 打包后包含整个 lodash（70KB+）
// 即使只使用了 merge 方法

// ES 模块
import { merge } from 'lodash-es';
const result = merge({}, { a: 1 });

// 打包后只包含 merge 相关代码
// Tree-shaking 消除未使用的代码

// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

export function multiply(a, b) {
  return a * b;
}

// main.js
import { add } from './math.js';
console.log(add(1, 2));

// 打包后只包含 add 函数
// subtract 和 multiply 被移除

// rollup.config.js
export default {
  input: 'src/main.js',
  output: [
    { file: 'dist/bundle.js', format: 'iife' },     // 浏览器
    { file: 'dist/bundle.cjs', format: 'cjs' },     // Node.js
    { file: 'dist/bundle.mjs', format: 'es' },      // ES 模块
    { file: 'dist/bundle.umd.js', format: 'umd' },  // UMD
  ]
};

// 直接使用 ES 模块语法
import { something } from './module.js';
export default function() { ... }

// 动态导入
async function loadModule() {
  const { heavyFunction } = await import('./heavy.js');
  heavyFunction();
}

// 自动代码分割
// heavy.js 会被打包成单独的 chunk

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import terser from '@rollup/plugin-terser';

export default {
  plugins: [
    resolve(),    // 解析 node_modules
    commonjs(),   // 转换 CommonJS
    terser(),     // 压缩代码
  ]
};

// my-library/rollup.config.js
export default {
  input: 'src/index.js',
  output: [
    { file: 'dist/my-lib.cjs.js', format: 'cjs' },
    { file: 'dist/my-lib.esm.js', format: 'es' },
    { file: 'dist/my-lib.umd.js', format: 'umd', name: 'MyLib' },
  ]
};

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    sourcemap: true
  },
  plugins: [resolve()]
};

export default {
  input: 'src/components/index.js',
  output: [
    { dir: 'dist', format: 'es', preserveModules: true },
  ],
  external: ['vue', 'react']
};

// 单入口
input: 'src/main.js'

// 多入口
input: ['src/main.js', 'src/admin.js']

// 对象形式
input: {
  main: 'src/main.js',
  admin: 'src/admin.js'
}

output: {
  file: 'dist/bundle.js',    // 输出文件
  format: 'es',              // 输出格式
  name: 'MyLibrary',         // UMD 全局变量名
  sourcemap: true,           // 生成 sourcemap
}

plugins: [
  resolve(),    // 解析模块
  commonjs(),   // 转换 CommonJS
  json(),       // 导入 JSON
  terser(),     // 压缩代码
]

external: ['lodash', 'vue', 'react']

// 或使用函数
external: (id) => {
  return id.includes('node_modules');
}

┌─────────────────────────────────────────────────────────────┐
│                     Rollup 打包流程                          │
├─────────────────────────────────────────────────────────────┤
│                                                              │
│  ┌──────────┐    ┌──────────┐    ┌──────────┐              │
│  │ 入口文件  │ -> │ 构建依赖图 │ -> │ 模块解析  │              │
│  └──────────┘    └──────────┘    └──────────┘              │
│                                        │                     │
│                                        ▼                     │
│  ┌──────────┐    ┌──────────┐    ┌──────────┐              │
│  │ 输出文件  │ <- │ 代码生成  │ <- │ Tree-shake│              │
│  └──────────┘    └──────────┘    └──────────┘              │
│                                                              │
└─────────────────────────────────────────────────────────────┘

// 输出
import { foo } from './foo.js';
export default function() { ... }

// 输出
'use strict';
var foo = require('./foo.js');
module.exports = function() { ... }

// 输出
(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.MyLib = factory());
})(this, (function () { ... }));

// 输出
(function () {
  'use strict';
  // ...代码
})();

// 输出
System.register('my-lib', [], function (exports) {
  'use strict';
  return {
    execute: function () {
      exports('default', function() { ... });
    }
  };
});

入门阶段
├── 安装与配置
├── 基本使用
├── 命令行参数
└── 配置文件

进阶阶段
├── 插件系统
├── 代码分割
├── Tree-shaking
└── 多入口打包

高级阶段
├── 自定义插件
├── 高级配置
├── 性能优化
└── 与其他工具集成

实战阶段
├── 库开发实战
├── 应用开发
├── 组件库打包
└── 最佳实践