• rollup打包工具核心配置详解

    文章目录

    系列文章

    rollup 是什么

    Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。

    Rollup 使用ES6模块，而不是以前的特殊解决方案，如 CommonJS 和 AMD。

    Rollup 更多是用于library打包


    rollup 与 webpack 对比

    Webpack 具备强力的处理各类资源，构建 web应用 的能力，当然它也可以构建 library；

    Rollup 将自己定位于 “JavaScript 模块打包器，将小块代码编译成大块复杂的代码”，rollup.js更多是用于构建 library；


    相比于 webpack，rollup 的优势

    • rollup 更好的支持 Tree Shaking，webpack 打包 es 模块尚属于试验阶段，打包的结果并不完美；
    • rollup 相对学习成本更低；
    • rollup 打包体积更小；

    rolup 配置文件

    // rollup.config.js
export default {
  // 核心选项
  input,     // 必须
  external,
  plugins,

  // 额外选项
  onwarn,

  // danger zone
  acorn,
  context,
  moduleContext,
  legacy

  output: {  // 必须 (如果要输出多个，可以是一个数组)
    // 核心选项
    file,    // 必须
    format,  // 必须
    name,
    globals,

    // 额外选项
    paths,
    banner,
    footer,
    intro,
    outro,
    sourcemap,
    sourcemapFile,
    interop,

    // 高危选项
    exports,
    amd,
    indent
    strict
  },
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    以下编译后的示例代码没有经过babel编译，下一节将讲述这部分


    input

    • string | string [] | { [entryName: string]: string }
    • 包的入口点 (例如：你的 main.js 或者 app.js 或者 index.js)
    • 核心选项

    如果你提供入口点数组或将名称映射到入口点的对象，它们将被捆绑到单独的输出块中。除非使用 output.file 选项，否则生成的块名称将跟随 output.entryFileNames 选项。当使用对象形式时，[name]文件名的一部分将是对象属性的名称，而对于数组形式，它将是入口点的文件名。


    单入口

    // rollup.config.js
export default {
  input: 'src/main.js',
};

    • 1
    • 2
    • 3
    • 4

    多入口 —— 数组

    export default {
  input: [
    'src/main.js',
    'src/index.js'
  ],
  output: {
    dir: 'dist',
  },
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    在这里插入图片描述


    多入口 —— 对象

    export default {
  input: {
    main1: 'src/main.js',
    index1: 'src/index.js'
  },
  output: {
    dir: 'dist',
    entryFileNames: 'entry-[name].js'
  },
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    在这里插入图片描述


    output

    • Array 或者 Object

    • 定义包的输出

    • 必须，核心选项

    import pkg from './package.json'

// rollup.config.js
export default {
  input: 'src/main.js',
  output: {
      file: pkg.main,
      name: 'myMath',
      format: 'umd'
    },
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    // package.json
{
	"main": "dist/index.js",
}

    • 1
    • 2
    • 3
    • 4

    如果要输出多个，可以是一个数组

    import pkg from './package.json'

// rollup.config.js
export default {
  input: 'src/main.js',
  output: [
    {
      file: pkg.browser,
      name: 'myMath',
      format: 'umd'
    },
    {
      file: pkg.main,
      format: 'cjs',
      exports: 'auto'
    },
    {
      file: pkg.module,
      format: 'es'
    }
  ],
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    // package.json
{
  "main": "dist/cjs/index.js",
	"module": "dist/es/index.js",
	"browser": "dist/umd/index.js",
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    dir

    • string

    放置所有生成的chunks的目录。生成多个chunks的时候需要此选项。否则，可以改用file选项。


    file

    • String
    • 输出的文件。也可用于生成 sourcemaps。只能在生成的块不超过一个时使用。
    • 必须，核心选项
    // rollup.config.js
export default {
  input: 'src/main.js',
  output: {
      file: '"dist/index.js',
      name: 'myMath',
      format: 'umd'
    },
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    format

    • String，默认 es
    • 生成包的格式
    • 核心选项

    生成包的格式如下

    • amd – 异步模块定义，用于像RequireJS这样的模块加载器；
    • cjs – CommonJS，适用于 Node 和 Browserify/Webpack（别名：commonjs）；
    • es – 将软件包保存为 ES 模块文件，在现代浏览器中可以通过