官網(wǎng)

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

安裝

npm install --save-dev @babel/core

功能

Babel 是廣為使用的 ES6 轉(zhuǎn)碼器，可以將 ES6 代碼轉(zhuǎn)化為 ES5 代碼。比如：

// 轉(zhuǎn)碼前
input.map(item=>item+1)
// 轉(zhuǎn)碼后
input.map(function (item){
    return item+1;
});

配置文件 .babelrc

使用 Babel 第一步就是配置此文件，放在項(xiàng)目根目錄，此文件用于配置轉(zhuǎn)碼規(guī)則和插件，基本格式：

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

對(duì)預(yù)設(shè)（presets）和插件（plugins）進(jìn)行配置，因此不同的轉(zhuǎn)譯器作用不同的配置項(xiàng)，大致可分為以下三項(xiàng)：

1.語(yǔ)法轉(zhuǎn)譯器

主要對(duì) JavaScript 最新的語(yǔ)法糖進(jìn)行編譯，并不負(fù)責(zé)轉(zhuǎn)譯新增的 API 和全局對(duì)象。
而 Promise,Iterator,Generator,Set,Maps,Proxy,Symbol 等全局對(duì)象，以及一些定義在全局對(duì)象的方法（比如 includes/Object.assign 等）并不能被編譯。

@babel/preset-env 轉(zhuǎn)譯包

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

官方推薦使用，包含了所有現(xiàn)代js（es2015 es2016等）的所有新特性，你也可以傳遞一些配置給env，精準(zhǔn)實(shí)現(xiàn)你想要的編譯效果。

{
  "presets": [
    ["@babel/env",  {
      "modules": false //默認(rèn)都是支持 CommonJS
    }]
  ]
}

env 更多配置可以參考官網(wǎng)

2.API 和全局對(duì)象轉(zhuǎn)譯器

負(fù)責(zé)轉(zhuǎn)譯新增的 API 和全局對(duì)象，保證在瀏覽器的兼容性。比如Promise,Iterator,Generator,Set,Maps,Proxy,Symbol 等全局對(duì)象，以及一些定義在全局對(duì)象的方法（比如 includes/Object.assign 等）具體可查詢definitions.js

babel polyfill

相當(dāng)于一個(gè)墊片，可以轉(zhuǎn)譯所有 ES6 API 和全局對(duì)象。
缺點(diǎn)：增加包體，比如僅是使用到一種 ES6 新增 API，他也會(huì)增加所有的轉(zhuǎn)移語(yǔ)法。

兩種方式：

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

@babel/plugin-transform-runtime

全自動(dòng)的，不會(huì)污染全局 API。

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

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

但對(duì)于一些實(shí)例化方法比如 Array.includes(x)，babel-plugin-transform-runtime 無(wú)法轉(zhuǎn)換，此時(shí)需要接入 @babel/polyfill

@babel/polyfill

修改全局 prototype 來(lái)對(duì) API 和全局變量的墊片的，所以可以轉(zhuǎn)譯實(shí)例方法。

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

1.import "@babel/polyfill";

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

3.module.exports = {// 適合使用 webpack 構(gòu)建的項(xiàng)目
　　entry: ["@babel/polyfill", "./app/js"]
};

es6-promise

安裝：npm install es6-promise

如果僅使用到 promise 相關(guān) API，可以僅添加此轉(zhuǎn)譯器

引用：

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

3.jsx,flow,TypeScript 等插件轉(zhuǎn)譯器

@babel/preset-react

當(dāng)你使用 react 項(xiàng)目時(shí)，需要使用此包配合轉(zhuǎn)譯
安裝：npm install --save-dev @babel/preset-react
引用：在 .babelrc 中添加配置

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

@babel/preset-typescript

當(dāng)你項(xiàng)目是用 TypeScript 編寫(xiě)時(shí)，需要使用此包配合轉(zhuǎn)譯
安裝：npm install --save-dev @babel/preset-typescript
引用：在 .babelrc 中添加配置

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

.babelrc 常用示例

react 項(xiàng)目

安裝：

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

{
  "presets": [
    ["@babel/env", {
      "modules": false
    }],
    "@babel/preset-react"
  ],
  "comments": false,//不產(chǎn)生注釋
  "plugins": ["@babel/plugin-transform-runtime"]
}