rollup入门介绍

介绍

rollup采用es6原生的模块机制进行模块的打包构建，rollup更着眼于未来，对commonjs模块机制不提供内置的支持，是一款更轻量的打包工具。本文从实践的角度对rollup做一个基础的入门介绍, 有问题也欢迎大家一起来探讨。

安装

在本地开发环境安装rollup。

npm i rollup -D
复制代码

使用

使用方法与webpack非常相似，通常都是命令行来实现打包，当然在实际的应用中，我们经常使用npm script 进行包装。

在src目录下有foo.js ：

// src/foo.js
export default 'hello world!';

复制代码

和作为入口文件的main.js:

// src/main.js
import foo from './foo.js';
export default function () {
  console.log(foo);
}

复制代码

在项目根目录下使用rollup对main.js进行打包：

rollup src/main.js --o dist/bundle.js --f cjs
复制代码

上面的命令表示rollup对main.js进行打包，--o参数指定了打包后的文件名及存放目录。--f参数指定打包构建后的文件是commonjs规范的文件。

使用配置文件

在命令行中通过参数形式去设置rollup的行为，不是很方便。如webpack一样，我们通常使用一个rollup.config.js的配置文件来更灵活地定制rollup的行为。 上述命令行实现的功能我们可以在配置文件中这样配置：

// rollup.config.js

export default {
  input: 'src/main.js',
  output: {
    file: './dist/bundle.js',
    format: 'cjs'
  }
};

复制代码

此外，我们在package.json中封装一个npm script：

"scripts": {
    "build": "rollup -c"
}
复制代码

-c参数指定rollup构建时使用的配置文件，如果缺省的话，默认会使用根目录下的rollup.config.js。

在终端中执行命令：

npm run build
复制代码

搭配babel

rollup的模块机制是ES6 Modules，但并不会对es6其他的语法进行编译。因此如果要使用es6的语法进行开发，还需要使用babel来帮助我们将代码编译成es5。

这种强需求，rollup当然提供了解决方案。 首先是安装rollup-plugin-babel，该插件将rollup和babel进行了完美结合。

npm i -D rollup-plugin-babel
复制代码

在rollup.config.js中配置如下：

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

export default {
  input: 'src/main.js',
  output: {
    file: './dist/bundle.js',
    format: 'cjs'
  }
  plugins: [
    babel({
      // babelrc: false,
      exclude: 'node_modules/**' // only transpile our source code
    })
  ]
};
复制代码

同时在babel的配置文件.babelrc中配置如下：

{
  "presets": [
    ["env", {
      "modules": false
    }]
  ],
  "plugins": ["external-helpers"]
}
复制代码

我们用到了babel的一个功能集env,和external-helpers插件。babel会按照env和external-helpers指定的功能去完成编译工作。 配置"modules": false是因为rollup会处理es6模块语法，其余的es6语法才由babel处理。 external-helpers, 是为了避免在每个模块的头部重复引用相同的"helpers"方法，只需要在构建完的bundle头部引入一次就够了。

当然使用之前我们得先安装：

npm i -D babel-preset-env babel-plugin-external-helpers
复制代码

貌似还需要安装 babel-core

兼容commonjs

npm生态已经繁荣了多年，commonjs规范作为npm的包规范，大量的npm包都是基于commonjs规范来开发的，因此在完美支持es6模块规范之前，我们仍旧需要兼容commonjs模块规范。rollup提供了插件rollup-plugin-commonjs，以便于在rollup中引用commonjs规范的包。该插件的作用是将commonjs模块转成es6模块。rollup-plugin-commonjs通常与rollup-plugin-node-resolve一同使用，后者用来解析依赖的模块路径。

安装：

npm install --save-dev rollup-plugin-commonjs rollup-plugin-node-resolve
复制代码

在rollup.config.js中进行配置：

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

export default {
  input: 'src/main.js',
  output: {
    file: './dist/bundle.js',
    format: 'cjs'
  }
  plugins: [
    resolve(),
    commonjs(),
    babel({
      exclude: 'node_modules/**' // only transpile our source code
    })
  ]
};
复制代码

tree shaking

tree shaking是rollup除es6模块外的另一个核心卖点，当然这个特性在webpack中也有实现。tree shaking的优点毋庸多言了，结合es6模块，对代码进行静态分析，能更有效地剔除冗余的代码，减小js文件的大小。一句话，大家多多使用就对了。

总结

号称下一代打包工具的rollup基于es6模块系统，同时支持tree shaking，配置上相对轻量。针对js库级别的应用非常适合使用rollup。对应业务场景丰富的应用，如需要各种loader来处理图片、css、字体等、需要按需加载，代码分割还是webpack更适合。大家可以视具体应用场景选择。