前端工程化 词条目录
前端Wiki/词条/Rollup 打包

Rollup 打包

定义以 ES Module 为核心的打包器,以干净的输出和卓越的 Tree Shaking 著称,是发布库的标准选择

Rollup 从一开始就只认 ES Module,因此它能静态分析整棵依赖树,把没被用到的导出干净地剔除掉——这就是它 Tree Shaking 效果远好于早期 webpack 的根本原因。它输出的代码扁平、无运行时、接近手写,非常适合发布 npm 库。输出格式覆盖 ESM、CJS、UMD 与 IIFE,配合 external 把依赖排除在产物之外,库就能做到按需被消费方引用。

框架和工具链底层大量采用 Rollup:Vue、React 的部分构建产物、Vite 的生产打包(借用 Rollup 的插件生态与代码拆分能力)都是它。应用级开发它不如 webpack 生态全(代码拆分、动态导入 historically 较弱),但「写库」场景几乎是目前的事实标准。新版本陆续补齐了代码拆分与动态导入能力,作为应用打包器的短板正在被持续缩小。

JavaScript
// rollup.config.mjs —— 打包一个库
import resolve from '@rollup/plugin-node-resolve';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js',        // 入口(ES Module)
  output: [
    { file: 'dist/bundle.cjs.js', format: 'cjs' },  // CommonJS 版
    { file: 'dist/bundle.esm.js', format: 'esm' },  // ES Module 版
    { file: 'dist/bundle.umd.js', format: 'umd', name: 'MyLib' }
  ],
  plugins: [resolve(), terser()],
  external: ['lodash']          // lodash 不打进包,由使用者安装
};
⚠ 常见误区
🔗 相关词条代码压缩与 Tree ShakingVite 与 esbuild
← 返回来源章节代码压缩与 Tree Shaking