output

dir

指定所有生成的 chunk 被放置在哪个目录中。

• 如果生成一个以上的 chunk，那么这个选项是必需的。
• 否则，可以使用 file 选项来代替。

export default {
  input: ['src/index.js', 'src/other.js'], // 多入口
  output: {
    format: 'es',
    dir: 'dist', // 指定输出目录
    entryFileNames: '[name].js', // 指定输出文件名
  },
}

提示

适用于 多入口文件 或 代码拆分（code splitting） 的场景。

每个入口点都会生成独立的输出文件，文件名由 output.entryFileNames 或其他配置决定。

file

指定要写入的文件。如果适用的话，也可以用于生成 sourcemap。

• 只有在生成的 chunk 不超过一个的情况下才可以使用。

• file: 用于指定单一文件的输出路径，。

  • 输出的代码会被打包到这个指定的文件中。

    export default {
      input: 'src/index.js',
      output: {
        format: 'es',
        file: 'dist/bundle.js', // 指定输出文件
      },
    }

提示

适用于 单入口文件 的构建。

注意

file 和 dir 是互斥的，不能同时设置，只能选择其中一个。

format

用于指定生成的 bundle 的格式。满足以下其中之一：

• amd：异步模块加载，适用于 RequireJS 等模块加载器。
• cjs：CommonJS，适用于 Node 环境和其他打包工具（别名：commonjs）。
• es：将 bundle 保留为 ES 模块文件，适用于其他打包工具，以及支持 <script type=module> 标签的浏览器。（别名：esm，module）。
• iife：自执行函数，适用于 <script> 标签（如果你想为你的应用程序创建 bundle，那么你可能会使用它）。iife 表示“立即调用函数表达式”。
• umd：通用模块定义规范，同时支持 amd，cjs 和 iife。
• system：SystemJS 模块加载器的原生格式（别名：systemjs）。

globals

用于在 umd、iife bundle 中，使用 id: variableName 键值对指定外部依赖。

例如：

rollup.config.js

export default {
  // ...
  external: ['jquery'],
  output: {
    format: 'iife',
    name: 'MyBundle',
    globals: {
      jquery: '$',
    },
  },
}

main.js

import $ from 'jquery'

或者，可以提供一个函数，将外部模块的 ID 变成一个全局变量名。

import { fileURLToPath } from 'node:url'

const externalId = fileURLToPath(new URL('src/some-local-file-that-should-not-be-bundled.js', import.meta.url))

export default {
  //...,
  external: [externalId],
  output: {
    format: 'iife',
    name: 'MyBundle',
    globals: {
      [externalId]: 'globalVariable',
    },
  },
}

name

对于输出格式为 iife、umd 的 bundle 来说，若想要使用全局变量名来表示你的 bundle 时，该选项是必要的。

同一页面上的其他脚本可以使用这个变量名来访问你的 bundle 输出。

例如：

rollup.config.js

export default {
  // ...
  output: {
    file: 'bundle.js',
    format: 'iife',
    name: 'MyBundle',
  },
}

main.js

var MyBundle = function () {
  // ...
}

该选项也支持命名空间，即可以包含点 . 的名字。最终生成的 bundle 将包含命名空间所需要的设置：

export default {
  // ...
  output: {
    file: 'bundle.js',
    format: 'iife',
    name: 'a.b.c',
    extend: true, // 允许扩展全局变量
  },
}

/*
this.a = this.a || {};
this.a.b = this.a.b || {};
this.a.b.c = ...
*/

plugins

import terser from '@rollup/plugin-terser'

export default {
  input: 'main.js',
  output: [
    {
      file: 'bundle.js',
      format: 'es',
    },
    {
      file: 'bundle.min.js',
      format: 'es',
      plugins: [terser()],
    },
  ],
}

---

extend

该选项用于指定是否扩展 umd 或 iife 格式中 name 选项定义的全局变量。

• 当值为 true 时，该全局变量将定义为 (global.name = global.name || {})。
• 当值为 false 时，name 选项指定的全局变量将被覆盖为 (global.name = {})。

exports

https://cn.rollupjs.org/configuration-options/#output-exports

该选项用于指定导出模式。默认是 auto，指根据 input 模块导出推测你的意图：

• default：适用于只使用 export default ... 的情况；请注意，此操作可能会导致生成想要在与 ESM 输出可互换的 CommonJS 输出时出现问题。
• named：适用于使用命名导出的情况。
• none：适用于没有导出的情况（比如，当你在构建应用而非库时）。

由于这只是一个输出的转换过程，因此仅当默认导出是所有入口 chunk 的唯一导出时，你才能选择 default。同样地，仅当没有导出时，才能选择 none，否则 Rollup 将会抛出错误。

default 和 named 之间的差异会影响其他人使用你的 bundle 的方式。例如：

• 如果该选项的值为 default 时，那么 CommonJS 用户可以通过以下方式使用你的库：

  // your-lib 包入口
  export default 'Hello world'
  
  // CommonJS 消费者
  /* require( "your-lib" ) 返回 "Hello World" */
  const hello = require('your-lib')

• 如果该选项的值是 named，那么用户则通过以下方式使用你的库：

  // your-lib 包入口
  export const hello = 'Hello world'
  
  // CommonJS 消费者
  /* require( "your-lib" ) 返回 {hello: "Hello World"} */
  const hello = require('your-lib').hello
  /* 或使用解构 */
  const { hello } = require('your-lib')

问题是，如果你使用 named 导出，但也会有一个 default 导出，用户将不得不类似这样做来使用默认导出：

// your-lib 包入口
export default 'foo'
export const bar = 'bar'

// CommonJS 消费者
/* require( "your-lib" ) 返回 {default: "foo", bar: "bar"} */
const foo = require('your-lib').default
const bar = require('your-lib').bar
/* 或使用解构 */
const { default: foo, bar } = require('your-lib')

请注意：一些工具，如 Babel、TypeScript、Webpack 和 @rollup/plugin-commonjs，它们能够解析 CommonJS 的 require(...) 调用，并将其转换为 ES 模块。如果你正在生成想要在与这些工具的 ESM 输出可互换的 CommonJS 输出，则应始终使用 named 导出模式。原因是这些工具中大多数默认情况下会在 require 中返回 ES 模块的命名空间，其中默认导出是 .default 属性。

换句话说，对于这些工具，你无法创建一个包接口，在该接口中 const lib = require("your-lib") 能够产生与 import lib from "your-lib" 相同的结果。但是，使用 named 导出模式，const {lib} = require("your-lib") 将与 import {lib} from "your-lib" 等效。

assetFileNames

https://cn.rollupjs.org/configuration-options/#output-assetfilenames

除了 js 均视为 assets 资源文件。

chunkFileNames

https://cn.rollupjs.org/configuration-options/#output-chunkfilenames

用于对代码分割中产生的 chunk 自定义命名，其值也可以是一个函数，对每个 chunk 调用以返回匹配模式。

正斜杠 / 可以用来划分文件到子目录。

manualChunks

https://cn.rollupjs.org/configuration-options/#output-manualchunks

创建自定义的公共 chunk。