rollup.js插件rollup-plugin-babel介绍

对于打包一个项目的整个应用的话，webpack更适合，对于类库的打包，使用 Rollup效率更高。

我们知道Babel它能够帮助我们转译 JavaScript 新特性(ES6/ES2015 等)到 ES5 版本，这也将支持目前所有的浏览器来正常运行代码。

rollup的模块机制是ES6 模板，并不会对es6其他的语法进行编译。因此如果要使用es6的语法进行开发，还需要使用babel来帮助我们将代码编译成es5。对于这种需求，rollup提供了解决方案rollup-plugin-babel，该插件将rollup和babel进行了完美结合。

安装

npm install --save-dev rollup-plugin-babel

当然项目也安装Babel

npm install --save-dev 
                babel-core
                babel-plugin-external-helpers
                babel-plugin-transform-runtime
                babel-preset-env
                babel-preset-stage-2
                babel-register
                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头部引入一次就够了。