Rollup 基础：全局安装方式

rollup 适合做什么

rollup 和 webpack 的定位不一样。webpack 面向应用，强项是代码分割、按需加载、各种资源都能通过 loader 处理；rollup 面向库，输出的产物干净、几乎没有运行时胶水代码，而且原生围绕 ES Module 设计，tree-shaking 的效果更彻底。Vue、React 这些库自己的打包用的都是 rollup 这一路。

差别的根源在模块规范。webpack 会把每个模块包成一个函数，再用自己实现的 __webpack_require__ 串起来，所以产物里必然有一层运行时。rollup 走的是「摊平作用域」的思路，把所有模块的代码提到同一个作用域里，靠重命名解决变量冲突，最后输出的文件读起来跟手写的差不多。这对库来说很重要——使用者再打包一次时，代码是透明的，能继续被优化。

写库还有个刚性需求是多格式输出。同一份源码要同时给 import 用（ESM）、给 require 用（CJS）、给 <script> 直接引用（UMD/IIFE），rollup 的 output 支持数组，一次构建产出多份，这块比 webpack 顺手很多。

安装

想快速试一下命令行用法可以装全局，实际项目里我更建议装成项目的 devDependency，这样版本跟着仓库走，团队成员和 CI 用的是同一个版本：

npm install --global rollup
# or
pnpm add rollup -g

装成项目依赖的话把 -g 去掉即可：pnpm add -D rollup，然后通过 pnpm rollup 或者写进 package.json 的 scripts 里调用。

装完 rollup --version 确认能跑。注意 rollup 3.x 起要求 Node 14.18 以上，老项目升级前先看一眼 Node 版本。

最小可用示例

不写配置文件也能直接打包，-i 指定入口，-o 指定输出，-f 指定模块格式：

rollup -i src/index.js -o dist/bundle.js -f esm

实际项目一般用配置文件，在根目录建 rollup.config.js：

export default {
  input: 'src/index.js',
  output: [
    { file: 'dist/index.cjs.js', format: 'cjs' },
    { file: 'dist/index.esm.js', format: 'esm' },
    { file: 'dist/index.umd.js', format: 'umd', name: 'MyLib' },
  ],
};

然后执行 rollup -c 让它读配置。format: 'umd' 时必须给 name，因为 UMD 要在全局挂一个变量名，不给会直接报错。

有一点刚上手容易卡住：rollup 核心只认 ES Module，也不会去 node_modules 里找包。想引入第三方依赖得配 @rollup/plugin-node-resolve 解析路径，遇到 CommonJS 写法的包还要加 @rollup/plugin-commonjs 转换。这两个插件基本是标配，缺了就会报 Unresolved dependencies 之类的警告，产物里对应的 import 语句被原样留下。