Rollup 中如何配置 output 选项?

推荐答案

在 Rollup 中,output 选项用于配置打包后的输出文件。以下是一个常见的 output 配置示例:

-- -------------------- ---- -------
------ ------- -
  ------ --------------
  ------- -
    ----- ------------
    ------- -------
    ----- -----------
    ---------- -----
    -------- -
      ------- ---
    -
  -
--

关键配置项说明:

  • file: 指定输出文件的路径和名称。
  • format: 指定输出模块的格式,常见的有 iife(立即执行函数表达式)、cjs(CommonJS)、es(ES 模块)等。
  • name: 当 formatiifeumd 时,指定全局变量的名称。
  • sourcemap: 是否生成 sourcemap 文件,默认为 false
  • globals: 指定外部依赖的全局变量名称。

本题详细解读

1. file 选项

file 选项用于指定输出文件的路径和名称。例如,file: 'dist/bundle.js' 会将打包后的文件输出到 dist 目录下,并命名为 bundle.js

2. format 选项

format 选项决定了输出模块的格式。常见的格式包括:

  • iife: 立即执行函数表达式,适用于浏览器环境。
  • cjs: CommonJS 格式,适用于 Node.js 环境。
  • es: ES 模块格式,适用于现代 JavaScript 环境。
  • umd: 通用模块定义,兼容 AMD、CommonJS 和全局变量。

3. name 选项

formatiifeumd 时,name 选项用于指定全局变量的名称。例如,name: 'MyBundle' 会将打包后的代码挂载到 window.MyBundle 上。

4. sourcemap 选项

sourcemap 选项用于控制是否生成 sourcemap 文件。sourcemap 文件可以帮助开发者在调试时映射回原始源代码。设置为 true 时,Rollup 会生成一个 .map 文件。

5. globals 选项

globals 选项用于指定外部依赖的全局变量名称。例如,如果你在代码中使用了 jquery,并且希望它通过全局变量 $ 来引用,可以配置 globals: { jquery: '$' }

6. 其他选项

  • dir: 当输出多个文件时,指定输出目录。
  • exports: 指定模块的导出方式,如 autodefaultnamed 等。
  • banner/footer: 在输出文件的开头或结尾添加自定义内容。

通过合理配置 output 选项,可以灵活控制 Rollup 打包后的输出结果,满足不同场景的需求。

纠错
反馈