配置选项

input

该选项用于指定 bundle 的入口文件（例如，main.js，app.js 或 index.js 文件）。如果值为一个入口文件的数组或一个将名称映射到入口文件的对象，那么它们将被打包到单独的输出 chunks。

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.jsmain.js

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

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.jsmain.js

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

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。

plugins

import resolve from '@rollup/plugin-node-resolve'
import commonjs from '@rollup/plugin-commonjs'

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

export default (async () => ({
  input: 'main.js',
  plugins: [resolve(), commonjs(), isProduction && (await import('@rollup/plugin-terser')).default()],
  output: {
    file: 'bundle.js',
    format: 'cjs',
  },
}))()

treeshake

https://cn.rollupjs.org/configuration-options/#treeshake

该选项用于决定是否应用除屑优化（tree-shaking）

配置选项 ​

input ​

output ​

dir ​

file ​

format ​

globals ​

name ​

plugins ​

extend ​

exports ​

assetFileNames ​

chunkFileNames ​

manualChunks ​

plugins ​

treeshake ​

配置选项

input

output

dir

file

format

globals

name

plugins

extend

exports

assetFileNames

chunkFileNames

manualChunks

plugins

treeshake