Babel转义

在上一章节，我们提到了@rollup/plugin-babel这个插件，它是用来把ES6代码在打包的时候转义成ES5的。

下面详细介绍Rollup中如何进行Babel转义。

首先，需要我们安装几个npm包，如下：

# 安装rollup 相关插件包
$ npm install @rollup/plugin-commonjs -D
$ npm install @rollup/plugin-node-resolve -D
$ npm install @rollup/plugin-babel -D

# 安装babel相关包
$ npm install @babel/core @babel/preset-env -D

安装完毕后，需要在rollup.config.mjs中使用插件，如下：

import commonjs from '@rollup/plugin-commonjs'
import nodeResolve from '@rollup/plugin-node-resolve'
import babel from '@rollup/plugin-babel'

export default {
  ...省略其它
  plugins: [
    nodeResolve(),
    commonjs(),
    babel({
      babelHelpers: 'bundled'
    })
  ]
}

然后，需要在根目录下新建.babelrc文件，并撰写如下内容：

{
  "presets": [
    "@babel/preset-env"
  ]
}

为了测试是否正确的处理了ES6相关的代码，我们需要改动一下入口文件src/index.js，并添加如下两个函数:

export const add = (a, b) => {
  return a + b
}

export const minus = (a, b) => {
  return a - b
}

最后，我们再次运行npm run build打包命令，查看dist目录下vue.esm.js文件打包后的代码。

var add = function add(a, b) {
  return a + b;
};
var minus = function minus(a, b) {
  return a - b;
};

export { add, minus };

可以看到，ES6相关的代码已经被正确的转义了。