rollup深入

[kekobin]

简介

Rollup 是一个 JavaScript 模块打包器。它会对符合js的ES6模块的文件进行打包（非ES6模块如commonjs模块需要插件先转化为es6模块）。另外，Rollup会自动的进行tree shaking,有效的降低代码体积。

externals

有外部引用时，可以使用该属性进行标记

// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';

export default {
  input: 'src/main.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  },
  plugins: [resolve({
    // 将自定义选项传递给解析插件
    customResolveOptions: {
      moduleDirectory: 'node_modules'
    }
  })],
  // 指出应将哪些模块视为外部模块
  external: ['lodash']
};

这样，“lodash”现在将被视为外部的（externals），不会与你的库打包在一起。

常用插件

1.rollup-plugin-node-resolve: rollup不知道如何处理从npm上安装到node_modules的依赖，这个插件就是告诉rollup如何查找外部的模块（自动对三方库进行集成）。与之相反的是external属性，即标记不需要继承到js代码里的第三方库。
2.rollup-plugin-commonjs: 有些库导出的是commonjs的模块，而rollup默认是使用ES6标准(即不支持commmonjs)，该插件就是将commonjs模块转成ES6模块。
3.rollup-plugin-babel: 将ES6转为ES5。
4.rollup-plugin-replace: 设置环境变量值，从而便于为浏览器端和node端打包需要的代码。
5.rollup-plugin-uglify: 代码压缩。
6.rollup-plugin-node-globals: 让你的代码可以引用 node 全局变量，如 process。

与webpack对比使用场景

Rollup偏向应用于js库，webpack偏向应用于前端工程，UI库；如果你的应用场景中只是js代码，希望做ES转换，模块解析，可以使用Rollup。如果你的场景中涉及到css、html，涉及到复杂的代码拆分合并，建议使用webpack。

版本区别

rollup可以根据format打包成四种格式文件: umd/cjs/iife/es。
分别是通用的模块、commonjs模块、自执行模块、es模块。

通用的starter

see code

更详细配置

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

name 生成UMD模块的名字
banner 在打包好的文件的块的外部(wrapper外部)的最顶部插入一段内容
footer 在打包好的文件的块的外部(wrapper外部)的最底部插入一段内容