五分钟突击之 .babelrc

官网

https://www.babeljs.cn/docs/configuration

安装

npm install --save-dev @babel/core

功能

Babel 是广为使用的 ES6 转码器，可以将 ES6 代码转化为 ES5 代码。比如：

// 转码前
input.map(item=>item+1)
// 转码后
input.map(function (item){
    return item+1;
});

配置文件 .babelrc

使用 Babel 第一步就是配置此文件，放在项目根目录，此文件用于配置转码规则和插件，基本格式：

{
"presets":[],
"plugins":[]
}

对预设（presets）和插件（plugins）进行配置，因此不同的转译器作用不同的配置项，大致可分为以下三项：

1.语法转译器

主要对 JavaScript 最新的语法糖进行编译，并不负责转译新增的 API 和全局对象。
而 Promise,Iterator,Generator,Set,Maps,Proxy,Symbol 等全局对象，以及一些定义在全局对象的方法（比如 includes/Object.assign 等）并不能被编译。

@babel/preset-env 转译包

npm install --save-dev @babel/preset-env

官方推荐使用，包含了所有现代js（es2015 es2016等）的所有新特性，你也可以传递一些配置给env，精准实现你想要的编译效果。

{
  "presets": [
    ["@babel/env",  {
      "modules": false //默认都是支持 CommonJS
    }]
  ]
}

env 更多配置可以参考官网

2.API 和全局对象转译器

负责转译新增的 API 和全局对象，保证在浏览器的兼容性。比如Promise,Iterator,Generator,Set,Maps,Proxy,Symbol 等全局对象，以及一些定义在全局对象的方法（比如 includes/Object.assign 等）具体可查询definitions.js

babel polyfill

相当于一个垫片，可以转译所有 ES6 API 和全局对象。
缺点：增加包体，比如仅是使用到一种 ES6 新增 API，他也会增加所有的转移语法。

两种方式：

• @babel/plugin-transform-runtime
• @babel/polyfill

@babel/plugin-transform-runtime

全自动的，不会污染全局 API。

安装：npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
引用：在 .babelrc 中添加配置

"plugins": ["@babel/plugin-transform-runtime"]

但对于一些实例化方法比如 Array.includes(x)，babel-plugin-transform-runtime 无法转换，此时需要接入 @babel/polyfill

@babel/polyfill

修改全局 prototype 来对 API 和全局变量的垫片的，所以可以转译实例方法。

安装：npm install --save-dev @babel/polyfill
引用：

1.import "@babel/polyfill";

1.require('@babel/polyfill');

3.module.exports = {// 适合使用 webpack 构建的项目
　　entry: ["@babel/polyfill", "./app/js"]
};

es6-promise

安装：npm install es6-promise

如果仅使用到 promise 相关 API，可以仅添加此转译器

引用：

import _promise from 'es6-promise';
const Promise = _promise.Promise;

3.jsx,flow,TypeScript 等插件转译器

@babel/preset-react

当你使用 react 项目时，需要使用此包配合转译
安装：npm install --save-dev @babel/preset-react
引用：在 .babelrc 中添加配置

"presets": ["@babel/preset-react"]

@babel/preset-typescript

当你项目是用 TypeScript 编写时，需要使用此包配合转译
安装：npm install --save-dev @babel/preset-typescript
引用：在 .babelrc 中添加配置

"presets": ["@babel/preset-typescript"]

.babelrc 常用示例

react 项目

安装：

• npm install --save-dev @babel/preset-env @babel/plugin-transform-runtime @babel/preset-react

{
  "presets": [
    ["@babel/env", {
      "modules": false
    }],
    "@babel/preset-react"
  ],
  "comments": false,//不产生注释
  "plugins": ["@babel/plugin-transform-runtime"]
}