JavaScript 库打包
 组件库开发
 工具函数库
 框架核心代码打包

┌─────────────────────────────────────────┐
│ ES Module 的优势                         │
├─────────────────────────────────────────┤
│ 1. 官方标准，JavaScript 发展方向         │
│ 2. 支持静态分析，优化 Tree Shaking       │
│ 3. 按需引入/导出，更灵活                 │
│ 4. 循环引用处理更好                      │
│ 5. 动态绑定支持                          │
└─────────────────────────────────────────┘

// ES Module（Rollup 推荐）
import { say } from "my-library"
say("hello")
 
// CommonJS（Webpack 默认）
const { say } = require("my-library")
say("hello")

ES Module 静态分析
    ↓
确定哪些代码被使用
    ↓
删除未使用的代码
    ↓
输出更小的 Bundle

// utils.js
export function funcA() {
  /* 使用 */
}
export function funcB() {
  /* 未使用 */
}
export function funcC() {
  /* 未使用 */
}
 
// main.js
import { funcA } from "./utils"
funcA()
 
// 打包后：funcB、funcC 被删除

https://rollupjs.org/

核心配置（Core）：
├── input（入口）
├── output（输出）← 必填
├── plugins（插件）
└── external（外部依赖）
 
高级配置（Advanced）：
├── cache（缓存）
├── onwarn（警告处理）
├── preserveEntrySignatures（入口签名）
└── strictDeprecations（严格弃用）
 
危险区域（Danger Zone）：
├── treeshake（Tree Shaking 配置）
├── context（上下文）
└── moduleContext（模块上下文）
 
实验性（Experimental）：
└── outputExperimentalMinChunkSize

第一步：核心配置（必须）
├── input
├── output
└── plugins
 
第二步：高级配置
├── external
├── cache
└── 其他优化配置
 
第三步：进阶实践
├── 编写自定义插件
└── 复杂场景配置

# 初始化项目
mkdir rollup-demo
cd rollup-demo
npm init
 
# 安装 Rollup
npm install -D rollup
 
# 使用
npx rollup

npm install -g rollup
 
# 使用
rollup

 错误示例：
mkdir rollup           # 项目名与包名冲突
npm init -y            # package.json 中 name: "rollup"
npm install -D rollup  # 安装失败！
 
 正确示例：
mkdir rollup-demo      # 项目名避免与包名冲突
npm init               # 手动指定 package name
npm install -D rollup  # 安装成功

npx rollup --help

rollup-demo/
├── src/
│   ├── main.js
│   └── c.js
├── dist/
├── package.json
└── rollup.config.js

export default function say(name) {
  console.log(name)
}

import say from "./c.js"
say("hello rollup")

npx rollup src/main.js -f cjs -o dist/bundle.js

npx rollup src/main.js -f es -o dist/bundle.es.js

"use strict"
 
// 标记已编译的 ES 模块
Object.defineProperty(exports, "__esModule", { value: true })
 
// 导出函数
function say(name) {
  console.log(name)
}
 
exports["default"] = say

Object.defineProperty(exports, "__esModule", { value: true })
// 这行代码的作用：标记当前文件是已编译的 ES 模块

// dist/test.js
const say = require('./bundle.js');
say('hello rollup');
 
// 执行
node dist/test.js
// 输出：hello rollup

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

{
  "scripts": {
    "build": "rollup -c"
  }
}

export default [
  {
    input: "src/main.js",
    output: {
      file: "dist/bundle.js",
      format: "cjs"
    }
  },
  {
    input: "src/main.js",
    output: {
      file: "dist/bundle.es.js",
      format: "es"
    }
  }
]

export default {
  input: "src/main.js",
  output: [
    {
      file: "dist/bundle.js",
      format: "cjs"
    },
    {
      file: "dist/bundle.es.js",
      format: "es"
    }
  ]
}

npm run build
# 或
npx rollup -c

https://github.com/rollup/awesome

npm install -D @rollup/plugin-terser

import terser from "@rollup/plugin-terser"
 
export default {
  input: "src/main.js",
  output: [
    {
      file: "dist/bundle.js",
      format: "cjs"
    },
    {
      file: "dist/bundle.es.js",
      format: "es"
    }
  ],
  plugins: [terser()]
}

// 压缩前
function say(name) {
  console.log(name)
}
exports["default"] = say
 
// 压缩后
;("use strict")
function e(o) {
  console.log(o)
}
exports.default = e

plugins: [
  pluginA(), // 第 1 个执行
  pluginB(), // 第 2 个执行
  pluginC() // 第 3 个执行
]
 
// 与 Webpack 的区别：
// Webpack：顺序引用，逆序执行
// Rollup：顺序引用，顺序执行

https://github.com/vuejs/vue-next

rollup.config.ts

// Vue 打包输出的格式
output: [
  { format: 'cjs' },      // CommonJS
  { format: 'esm' },      // ES Module
  { format: 'esm-browser' }, // 浏览器 ES Module
  { format: 'global' },   // 全局变量
  { format: 'runtime' },  // 运行时版本
]
 
// 核心配置
{
  input: 'src/index.ts',
  external: ['...'],      // 外部依赖
  plugins: [/* ... */],   // 插件列表
}

npx rollup -c --watch

1. 打开配置文件
2. 设置断点
3. 使用调试模式运行
4. 查看变量和执行流程

选择 Rollup：
├── 开发 npm 库
├── 开发组件库
├── 开发工具函数库
├── 需要纯净的输出产物
└── 对 Tree Shaking 要求高
 
选择 Webpack：
├── 开发复杂 SPA 应用
├── 需要强大的开发服务器
├── 需要代码分割和懒加载
├── 需要丰富的 Loader 生态
└── 企业级应用开发

开发环境：原生 ESM + esbuild
生产环境：Rollup 打包

import resolve from "@rollup/plugin-node-resolve"
import commonjs from "@rollup/plugin-commonjs"
import typescript from "@rollup/plugin-typescript"
import terser from "@rollup/plugin-terser"
 
export default {
  input: "src/index.ts",
  output: [
    {
      file: "dist/index.cjs.js",
      format: "cjs",
      sourcemap: true
    },
    {
      file: "dist/index.esm.js",
      format: "esm",
      sourcemap: true
    },
    {
      file: "dist/index.umd.js",
      format: "umd",
      name: "MyLibrary",
      sourcemap: true
    }
  ],
  external: ["lodash"],
  plugins: [resolve(), commonjs(), typescript(), terser()]
}

{
  "name": "my-library",
  "version": "1.0.0",
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "browser": "dist/index.umd.js",
  "types": "dist/index.d.ts",
  "files": ["dist"],
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w"
  }
}