纯粹的es moudle打包器Rollup

Rollup是一款小巧的ES Module打包模块，相对于webpack来说，更纯粹，更易用。

起步

安装基本模块：

1	npm install rollup --save-d

rollup有六种打包模式，常用的三种为：

在浏览器中使用则使用iife模式打包，代码会以立即执行函数的方式进行打包：

1	rollup ./src/entry.js --file ./dist/bundle.iife.js --format iife

而在Node中使用，我们就使用commonjs模块打包方式：

1	rollup ./src/entry.js --file ./dist/bundle.cjs.js --format cjs

如果你希望在浏览器和Node中使用，就是用兼容模式，使用UMD模式打包：

1	rollup ./src/entry.js --file ./dist/bundle.umd.js --format umd

单文件的打包很简单，我们选择一个入口文件，再导出一个输出文件即可。

配置文件

为了使用起来更便捷,我们推荐使用配置文件的方式进行模块打包，这样，我们还能使用一些高级特性（比如打包多个输出和使用插件）,新建一个rollup.config.js文件，通常放置到项目根目录。

仔细查阅这个包办大量选项的清单，你可以根据你自己的需要把它配置到你的配置文件中:

// 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
  },
};

两个必须的选择选项：输入inpout和输出output。

如果你想使用Rollup的配置文件，记得在命令行里加上--config或者-c。

核心配置

rollup.config.js

const resolve = require('rollup-plugin-node-resolve')

export default {
    // 输入
    input: './src/main.js',
    // 输出
    output: {
        file: './dist/bundel.js',
        format: 'iife', // amd | cjs | esm | iife | umd | system
        name: 'myModule',
        globals: {
            jquery: '$'
        }
    },
    // 插件
    plugins: [resolve()],
    // 外链
    external: [
        'jquery',
        path.resolve('./src/some-external.js'),
    ],
}

输入

字符串，打包模块的入口文件路径。
数组字符串，多个打包入口时使用。
Object，类似webpack那样，也是多入口的打包模式使用。

输出

file：输出文件路径
dir：如果是多入口打包，则指定输出目录即可。
format：打包的模式，目前有amd | cjs | esm | iife | umd | system可选值。
name：代表你的 iife/umd 包，同一页上的其他脚本可以访问它。
globals：Object 形式的 id: name 键值对，用于umd/iife包。一般用于告诉Rollup某个引入的模块是某个指定的全局变量，比如导入juqery时，会默认使用$进行替换，而不会加载jquery源码（事实上，rollup本身不支持打包导入的第三方模块）。

插件

类似webpack的插件那样，比如rollup本身不支持导入npm模块（第三方模块），例如jquery，如果你希望打包的bundle中包含这些npm模块，就需要借助一个插件：rollup-plugin-node-resolve。

类似的，Rollup也不支持导入CommonJs模块，即node中使用的模块语法，同样，我们使用rollup-plugin-commonjs这个插件就可以了。

外链

标记某些模块是全局模块，一般搭配globals搭配使用。

高级配置

const resolve = require('rollup-plugin-node-resolve')

export default {
    // 输入
    input: './src/main.js',
    // 输出
    output: {
        file: './dist/bundel.js',
        format: 'iife', // amd | cjs | esm | iife | umd | system
        paths: {
            d3: 'https://d3js.org/d3.v4.min',
        }
    },
    // 插件
    plugins: [resolve()],
    // 外链
    external: [
        'jquery',
        path.resolve('./src/some-external.js'),
    ],
    onwarn: (waring) => {
        const code = `【${waring.code}】`;
        const loc = waring.loc;
        const msg = waring.message;
        if (loc) {
            console.warn(code, `${loc.file} (${loc.line}:${loc.column}) ${message}`);
        }else {
            console.warn(code, msg)
        }
    },
}

路径paths

Function，它获取一个ID并返回一个路径，或者id：path对的Object。在提供的位置，这些路径将被用于生成的包而不是模块ID，从而允许您（例如）从CDN加载依赖关系。

String 字符串以前置/追加到文件束(bundle)。(注意:“banner”和“footer”选项不会破坏sourcemaps)

// rollup.config.js
export default {
  ...,
  banner: '/* my-library version ' + version + ' */',
  footer: '/* follow me on Twitter! @rich_harris */'
};

intro/outro

String类似于 banner和footer，除了代码在内部任何特定格式的包装器(wrapper)。

export default {
  ...,
  intro: 'var ENVIRONMENT = "production";'
};

onwarn

Function 将拦截警告信息。如果没有提供，警告将被复制并打印到控制台。

警告是至少有一个code 和 message属性的对象，这意味着您可以控制如何处理不同类型的警告：

sourcemap

如果 true，将创建一个单独的sourcemap文件。如果 inline，sourcemap将作为数据URI附加到生成的output文件中。

额外配置

请参考https://www.rollupjs.com/guide/big-list-of-options#%E6%A0%B8%E5%BF%83%E5%8A%9F%E8%83%BDcore-functionality

watch模式

这些选项仅在运行 Rollup 时使用 --watch 标志或使用 rollup.watch 时生效。

// rollup.config.js
export default {
  ...,
  watch: {
    include: 'src/**',
    exclude: 'node_modules/**',
  }
};

参考

Rollup官网

风之之的Blog