官網(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":[]
}
對預(yù)設(shè)（presets）和插件（plugins）進(jìn)行配置阴挣，因此不同的轉(zhuǎn)譯器作用不同的配置項(xiàng)，大致可分為以下三項(xiàng)：
1.語法轉(zhuǎn)譯器
主要對 JavaScript 最新的語法糖進(jìn)行編譯纺腊，并不負(fù)責(zé)轉(zhuǎn)譯新增的 API 和全局對象畔咧。
而 Promise,Iterator,Generator,Set,Maps,Proxy,Symbol 等全局對象，以及一些定義在全局對象的方法（比如 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 和全局對象轉(zhuǎn)譯器
負(fù)責(zé)轉(zhuǎn)譯新增的 API 和全局對象，保證在瀏覽器的兼容性趁仙。比如Promise,Iterator,Generator,Set,Maps,Proxy,Symbol 等全局對象虹蓄，以及一些定義在全局對象的方法（比如 includes/Object.assign 等）具體可查詢definitions.js
babel polyfill
相當(dāng)于一個墊片，可以轉(zhuǎn)譯所有 ES6 API 和全局對象幸撕。
缺點(diǎn)：增加包體薇组，比如僅是使用到一種 ES6 新增 API，他也會增加所有的轉(zhuǎn)移語法坐儿。
兩種方式：
- @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"]
但對于一些實(shí)例化方法比如 Array.includes(x)貌矿，babel-plugin-transform-runtime 無法轉(zhuǎn)換炭菌，此時需要接入 @babel/polyfill
@babel/polyfill
修改全局 prototype 來對 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)目時，需要使用此包配合轉(zhuǎn)譯
安裝：npm install --save-dev @babel/preset-react
引用：在 .babelrc 中添加配置
"presets": ["@babel/preset-react"]
@babel/preset-typescript
當(dāng)你項(xiàng)目是用 TypeScript 編寫時，需要使用此包配合轉(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"]
}
