Rollup

特点

1. 支持 ES 模块：原生支持 ES 模块，使得代码可以按需加载和树摇优化。
2. 树摇优化 (Tree Shaking)：自动移除未使用的代码，减小打包体积。
3. 插件系统：灵活的插件系统，支持各种格式和功能扩展。
4. 代码拆分：支持代码拆分 (Code Splitting)，优化输出文件的加载性能。
5. 输出格式多样：支持多种输出格式，如 ESM、CommonJS、UMD 和 IIFE。
6. 易于配置：简单易用的配置文件，支持多种高级配置选项。

使用场景

1. 库开发：适用于开发和打包 JavaScript 库，特别是那些需要发布为多种格式的库。
2. 现代 Web 应用：为现代 Web 应用程序提供高效的打包和优化方案。
3. 代码优化：通过树摇优化和代码拆分，减小应用程序的加载体积和提高性能。

安装方式

使用 npm 安装 Rollup：

npm install --save-dev rollup

使用示例

基础使用

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

然后运行 Rollup：

npx rollup -c

使用插件

Rollup 支持多种插件，如处理 CommonJS 模块、转译 ES6 代码等。以下是一个使用 Babel 插件的示例：

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

export default {
  input: 'src/main.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    name: 'MyBundle'
  },
  plugins: [
    babel({ babelHelpers: 'bundled' })
  ]
};

常用 配置 介绍

1. rollup.rollup：用于创建一个 Rollup 打包实例。

   const bundle = await rollup.rollup(inputOptions);
   await bundle.write(outputOptions);
   

2. inputOptions：输入配置选项。

   • input：入口文件路径。
   • plugins：使用的插件数组。

3. outputOptions：输出配置选项。

   • file：输出文件路径。
   • format：输出格式，如 esm、cjs、iife。
   • name：生成全局变量的名称，用于 iife 和 umd 格式。

4. plugin：插件机制。

   • @rollup/plugin-node-resolve：解析 Node.js 风格的模块。
   • @rollup/plugin-commonjs：将 CommonJS 模块转换为 ES 模块。
   • @rollup/plugin-babel：使用 Babel 转译代码。

高级用法

代码拆分 (Code Splitting) Rollup 支持将代码拆分为多个块，以便于按需加载：

// rollup.config.js
export default {
  input: 'src/main.js',
  output: {
    dir: 'dist',
    format: 'esm'
  }
};

多入口 可以配置多个入口文件来生成多个输出文件：

// rollup.config.js
export default {
  input: ['src/main.js', 'src/another.js'],
  output: {
    dir: 'dist',
    format: 'esm'
  }
};

官方资料

• 官方网站
• GitHub 仓库
• 文档