Rollup 安装与配置 #

安装 Rollup #

方式一：npm 安装（推荐） #

bash 
# 全局安装
npm install -g rollup

# 验证安装
rollup --version

# 本地安装（推荐）
npm install rollup --save-dev

方式二：Yarn 安装 #

bash 
# 全局安装
yarn global add rollup

# 本地安装
yarn add rollup --dev

方式三：pnpm 安装 #

bash 
# 全局安装
pnpm add -g rollup

# 本地安装
pnpm add rollup -D

命令行基础 #

基本命令格式 #

bash 
rollup [options] <entry file>

常用命令 #

bash 
# 基本打包
rollup src/main.js

# 指定输出文件
rollup src/main.js --file dist/bundle.js

# 指定输出格式
rollup src/main.js --format es --file dist/bundle.mjs

# 使用配置文件
rollup -c

# 使用指定配置文件
rollup -c rollup.config.prod.js

# 监听模式
rollup -c -w

# 显示帮助
rollup --help

命令行参数 #

参数 简写 描述
--config -c 使用配置文件
--input -i 入口文件
--file -o 输出文件
--format -f 输出格式
--name -n UMD 全局变量名
--watch -w 监听模式
--sourcemap -m 生成 sourcemap
--external -e 外部依赖
--globals -g 全局变量映射
--plugin -p 使用插件
--silent -s 静默模式

创建第一个项目 #

项目结构 #

text 
my-rollup-project/
├── src/
│   ├── main.js
│   └── utils.js
├── dist/
├── package.json
└── rollup.config.js

初始化项目 #

bash 
# 创建项目目录
mkdir my-rollup-project
cd my-rollup-project

# 初始化 package.json
npm init -y

# 安装 Rollup
npm install rollup --save-dev

创建源文件 #

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

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

// src/main.js
import { add } from './utils.js';

const result = add(1, 2);
console.log(result);

运行打包 #

bash 
# 使用 npx
npx rollup src/main.js --file dist/bundle.js --format iife

# 或添加 npm script
npm run build

配置文件 #

基础配置 #

创建 rollup.config.js：

javascript 
// rollup.config.js
export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    sourcemap: true
  }
};

使用配置文件 #

bash 
# 默认使用 rollup.config.js
rollup -c

# 指定配置文件
rollup -c rollup.config.prod.js

配置文件格式 #

ES Module 格式（推荐） #

javascript 
// rollup.config.js
export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'es'
  }
};

CommonJS 格式 #

javascript 
// rollup.config.js
module.exports = {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'es'
  }
};

TypeScript 格式 #

typescript 
// rollup.config.ts
import type { RollupOptions } from 'rollup';

const config: RollupOptions = {
  input: 'src/main.ts',
  output: {
    file: 'dist/bundle.js',
    format: 'es'
  }
};

export default config;

多配置导出 #

javascript 
// rollup.config.js
export default [
  {
    input: 'src/main.js',
    output: {
      file: 'dist/bundle.cjs.js',
      format: 'cjs'
    }
  },
  {
    input: 'src/main.js',
    output: {
      file: 'dist/bundle.esm.js',
      format: 'es'
    }
  }
];

函数式配置 #

javascript 
// rollup.config.js
export default (commandLineArgs) => {
  return {
    input: 'src/main.js',
    output: {
      file: commandLineArgs.output || 'dist/bundle.js',
      format: 'es'
    }
  };
};

Promise 配置 #

javascript 
// rollup.config.js
export default new Promise((resolve) => {
  setTimeout(() => {
    resolve({
      input: 'src/main.js',
      output: {
        file: 'dist/bundle.js',
        format: 'es'
      }
    });
  }, 100);
});

npm scripts 配置 #

基本配置 #

json 
// package.json
{
  "scripts": {
    "build": "rollup -c",
    "build:prod": "rollup -c rollup.config.prod.js",
    "watch": "rollup -c -w",
    "dev": "rollup -c -w --environment NODE_ENV:development"
  },
  "devDependencies": {
    "rollup": "^4.0.0"
  }
}

完整配置示例 #

json 
{
  "name": "my-rollup-project",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "rollup -c -w",
    "build": "rollup -c",
    "build:prod": "rollup -c rollup.config.prod.js",
    "clean": "rm -rf dist"
  },
  "devDependencies": {
    "rollup": "^4.0.0"
  }
}

常用插件安装 #

解析 node_modules #

bash 
npm install @rollup/plugin-node-resolve --save-dev

转换 CommonJS #

bash 
npm install @rollup/plugin-commonjs --save-dev

导入 JSON #

bash 
npm install @rollup/plugin-json --save-dev

代码压缩 #

bash 
npm install @rollup/plugin-terser --save-dev

Babel 支持 #

bash 
npm install @rollup/plugin-babel @babel/core @babel/preset-env --save-dev

TypeScript 支持 #

bash 
npm install @rollup/plugin-typescript typescript --save-dev

完整配置示例 #

基础项目配置 #

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

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

库开发配置 #

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

export default [
  {
    input: 'src/index.js',
    output: [
      {
        file: 'dist/my-lib.cjs.js',
        format: 'cjs',
        sourcemap: true
      },
      {
        file: 'dist/my-lib.esm.js',
        format: 'es',
        sourcemap: true
      }
    ],
    external: ['lodash'],
    plugins: [
      resolve(),
      commonjs()
    ]
  },
  {
    input: 'src/index.js',
    output: {
      file: 'dist/my-lib.umd.js',
      format: 'umd',
      name: 'MyLib',
      sourcemap: true
    },
    external: ['lodash'],
    plugins: [
      resolve(),
      commonjs(),
      terser()
    ]
  }
];

TypeScript 项目配置 #

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

export default {
  input: 'src/index.ts',
  output: {
    file: 'dist/bundle.js',
    format: 'es',
    sourcemap: true
  },
  plugins: [
    resolve(),
    commonjs(),
    typescript()
  ]
};

Babel 项目配置 #

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

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    sourcemap: true
  },
  plugins: [
    resolve(),
    commonjs(),
    babel({ babelHelpers: 'bundled' })
  ]
};
javascript 
// babel.config.js
export default {
  presets: [
    ['@babel/preset-env', {
      targets: {
        browsers: ['> 1%', 'last 2 versions', 'not ie <= 8']
      }
    }]
  ]
};

环境变量配置 #

使用环境变量 #

javascript 
// rollup.config.js
const isProduction = process.env.NODE_ENV === 'production';

export default {
  input: 'src/main.js',
  output: {
    file: isProduction ? 'dist/bundle.min.js' : 'dist/bundle.js',
    format: 'iife',
    sourcemap: !isProduction
  },
  plugins: isProduction ? [terser()] : []
};

命令行传递环境变量 #

bash 
# 方式一
NODE_ENV=production rollup -c

# 方式二
rollup -c --environment NODE_ENV:production

# 方式三：package.json
{
  "scripts": {
    "build:prod": "NODE_ENV=production rollup -c"
  }
}

开发环境配置 #

监听模式 #

bash 
# 命令行
rollup -c -w

# 或
rollup -c --watch

监听配置 #

javascript 
// rollup.config.js
export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife'
  },
  watch: {
    buildDelay: 300,
    clearScreen: false,
    skipWrite: false,
    include: ['src/**'],
    exclude: ['node_modules/**']
  }
};

配置文件位置 #

Rollup 按以下顺序查找配置文件：

  1. --config 指定的文件
  2. rollup.config.mjs
  3. rollup.config.js
  4. rollup.config.cjs
  5. rollup.config.ts（需要安装 rollup-plugin-typescript2）

TypeScript 配置 #

tsconfig.json #

json 
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "declaration": true,
    "declarationDir": "dist/types",
    "outDir": "dist",
    "rootDir": "src",
    "sourceMap": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

TypeScript + Rollup 完整配置 #

javascript 
// rollup.config.js
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';

const isProduction = process.env.NODE_ENV === 'production';

export default {
  input: 'src/index.ts',
  output: [
    {
      file: 'dist/index.cjs.js',
      format: 'cjs',
      sourcemap: true
    },
    {
      file: 'dist/index.esm.js',
      format: 'es',
      sourcemap: true
    }
  ],
  plugins: [
    resolve(),
    commonjs(),
    typescript({
      tsconfig: './tsconfig.json'
    }),
    isProduction && terser()
  ].filter(Boolean)
};

验证安装 #

创建测试文件 #

javascript 
// test.js
import { rollup } from 'rollup';

const bundle = await rollup({
  input: 'src/main.js'
});

await bundle.write({
  file: 'dist/bundle.js',
  format: 'es'
});

console.log('Rollup 安装成功！');

运行测试 #

bash 
node test.js

常见问题 #

找不到模块 #

bash 
# 确保安装了依赖
npm install

# 检查 node_modules
ls node_modules/rollup

配置文件语法错误 #

javascript 
// 确保使用正确的模块格式
// ES Module
export default { ... }

// CommonJS
module.exports = { ... }

插件加载失败 #

bash 
# 确保插件已安装
npm install @rollup/plugin-node-resolve --save-dev

# 检查导入路径
import resolve from '@rollup/plugin-node-resolve';

下一步 #

现在你已经完成了 Rollup 的安装和基础配置，接下来学习 基础使用 开始编写实际代码！

最后更新：2026-03-28