Rollup 中如何配置 format 选项？

推荐答案

在 Rollup 中，format 选项用于指定生成的 bundle 的模块格式。常见的格式包括 es、cjs、iife、umd 和 amd。你可以在 Rollup 配置文件中通过 output.format 来设置。

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs' // 可以是 'es', 'cjs', 'iife', 'umd', 'amd'
  }
};

本题详细解读

format 选项的作用

format 选项决定了 Rollup 如何将模块打包成最终的输出文件。不同的格式适用于不同的环境和需求：

• es: 输出为 ES 模块格式，适用于现代浏览器或支持 ES 模块的环境。
• cjs: 输出为 CommonJS 格式，适用于 Node.js 环境。
• iife: 输出为立即执行函数表达式 (IIFE)，适用于浏览器环境，通常用于直接嵌入到 HTML 中。
• umd: 输出为通用模块定义 (UMD)，适用于多种环境，包括浏览器和 Node.js。
• amd: 输出为异步模块定义 (AMD)，适用于 RequireJS 等 AMD 模块加载器。

配置示例

以下是一个完整的 Rollup 配置文件示例，展示了如何配置 format 选项：

// www.javascriptcn.com code example
export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs', // 设置为 CommonJS 格式
    name: 'MyLibrary', // 当 format 为 'iife' 或 'umd' 时，需要指定全局变量名
    globals: {
      lodash: '_' // 当使用外部依赖时，指定全局变量名
    }
  },
  external: ['lodash'] // 指定外部依赖
};

注意事项

• 当使用 iife 或 umd 格式时，通常需要指定 name 选项，以便在全局作用域中暴露模块。
• 如果使用了外部依赖（通过 external 选项指定），则需要通过 globals 选项来映射这些依赖的全局变量名。
• es 格式通常用于现代前端开发，而 cjs 格式则更适合 Node.js 环境。