由于新版本的ECMASscript的強(qiáng)大特性谆棱，使我們寫js代碼更加得心應(yīng)手寡喝，例如：calss阶祭，let绷杜，for...of，promise等等濒募，但可惜的是這些js新特新只被最新版本的瀏覽器支持鞭盟，那么指定范圍的低版本的瀏覽器的支持就需要一個(gè)專門的工具，babel就是這樣的一塊前端工具瑰剃。
但是babel系列的插件現(xiàn)在越來越多懊缺，對于初次接觸使用它的人來說需要花費(fèi)不少的時(shí)間，尤其是討厭英文的人培他。
babel-6已經(jīng)放棄了原來的babel包鹃两，取而代之的是各種轉(zhuǎn)換插件，剛開始舀凛，我也很納悶俊扳，為什么要分這么多插件包呢，原先的一個(gè)不好嗎猛遍？隨著使用我么發(fā)現(xiàn)馋记，這些插件的職責(zé)分明，避免了‘一刀切’的問題懊烤，不管你需不需要都給你編譯梯醒。
babel-loader
這個(gè)包是由babel團(tuán)隊(duì)開發(fā)的loader，用來告訴webpack我想要對我的js代碼進(jìn)行兼容性編譯腌紧。
babel-loader 只是起到一個(gè)通知者的角色茸习，通知babel你需要干活了，在webpack的module中使用代碼如下：
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/, // 不對node_modules目錄下的文件進(jìn)行編譯壁肋，可以提升webpack打包速度号胚，其他loader也有這個(gè)配置
use: {
loader: 'babel-loader',
// loader: 'babel-loader?cacheDirectory', // 使用緩存目錄它可以進(jìn)一步提升webpack的編譯速度
options: { // 這個(gè)配置項(xiàng)我們一般單獨(dú)拿出來籽慢，創(chuàng)建一個(gè)‘.babelrc’文件來單獨(dú)存放配置項(xiàng)
presets: ['@babel/preset-env']，// babel預(yù)設(shè)
plugin: ['@babel/plugin-proposal-object-rest-spread'] // 所需要使用的插件
}
}
}
]
}
babel-core
如果說 babel-loader 是告訴webpack我要對js文件進(jìn)行代碼兼容性編譯猫胁，那么箱亿，webpack接下來就是要找babel，而bable的入口就是 babel-core 弃秆，只有通過它届惋，webpack才能使用各種babel的api（前提是你安裝了相關(guān)的api）。
babel-preset-es* 和 babel-preset-stage-*
babel-preset-es2015 菠赚，babel-preset-es2016 脑豹，babel-preset-es2017等等傻傻的分也分不清楚。
這些預(yù)設(shè)將支持ES6新語法的兼容性編譯锈至。
將代碼轉(zhuǎn)化為 ES3
babel-preset-es3
將代碼轉(zhuǎn)化為 ES5
'babel-preset-es2015' 晨缴，
'babel-preset-stage-0' 译秦，
'babel-preset-stage-1' 峡捡，
'babel-preset-stage-2' ，
'babel-preset-stage-3' 筑悴，
將代碼轉(zhuǎn)化為 ES6
'babel-preset-es2016' 將ES2016轉(zhuǎn)化成ES6们拙，
'babel-preset-es2017' 將ES2017轉(zhuǎn)化成ES6，
預(yù)設(shè)只能將ES6語法編譯為你指定的ES版本語法阁吝，例如：箭頭函數(shù)砚婆，但是像 Array.from 這樣的API呢他無能為力。那么突勇，怎么辦呢装盯，我們下面來介紹幾種解決方案。
處理ES6 API
babel-polyfill
babel預(yù)設(shè)可以編譯幾乎所有的JavaScript新語法甲馋，但是對于API卻不能解決埂奈，解決這個(gè)問題babel用的是 babel-polyfill (它有core-js和regenerator兩部分構(gòu)成)。
執(zhí)行安裝命令：
npm install --save-dev babel-polyfill
babel-polyfill 有三種引入方法定躏。
1.那個(gè)模塊需要就在那個(gè)模塊引入账磺，
require('babel-polyfill');
2.全局引入方法1，在項(xiàng)目的入口文件引入痊远，如果項(xiàng)目有多個(gè)入口垮抗，則在每個(gè)需要的入口分別加入。
require('babel-polyfill');
3.全局引入方法2碧聪，可以在項(xiàng)目的 webpack.config.js 的入口配置項(xiàng)中引入冒版。
entry: {
app: ['babel-polyfill', './main.js']
},
這是第一種解決方案用來將ES6代碼編譯為es5。但是這種方案逞姿，增加了一些不必要的代碼壤玫，webpack打包后的文件比較大豁护，使用它還有一個(gè)問題就是容易造成全局污染。欲间。
而剛剛好babel提供了babel-runtime楚里。babel-plyfill我們以前經(jīng)常用，而babel-runtime猎贴，則是現(xiàn)在常用的班缎。
babel-runtime
babel-runtime不會污染全局對象。如：當(dāng)前的運(yùn)行環(huán)境如果不支持Symbol她渴，可以訪問 babel-runtime/core-js/symbol 這里重新定義了symbol达址，此外還有Promise，Set 和 Map 等趁耗。
babel-runtime 官方建議用在生產(chǎn)環(huán)境沉唠，而開發(fā)環(huán)境使用 babel-plugin-transform-runtime
babel-plugin-transform-runtime
引用自：https://github.com/babel/babel-loader
babel uses very small helpers for common functions such as _extend. By default this will be added to every file that requires it.
You can instead require the babel runtime as a separate module to avoid the duplication.
這段話的意思是說：
babel會使用一些非常小的輔助（helper）函數(shù)作為通用函數(shù)，例如：_extend 苛败。默認(rèn)情況下满葛，這類函數(shù)將被添加到每個(gè)需要它的文件中。這時(shí)你可以使用babel runtime作為單獨(dú)的模塊來避免重復(fù)罢屈。
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/, // 不對node_modules目錄下的文件進(jìn)行編譯嘀韧，可以提升webpack打包速度，其他loader也有這個(gè)配置
use: {
loader: 'babel-loader',
// loader: 'babel-loader?cacheDirectory', // 使用緩存目錄它可以進(jìn)一步提升webpack的編譯速度
options: { // 這個(gè)配置項(xiàng)我們一般單獨(dú)拿出來缠捌，創(chuàng)建一個(gè)‘.babelrc’文件來單獨(dú)存放配置項(xiàng)
presets: ['@babel/preset-env']锄贷，// babel預(yù)設(shè)
plugin: ['@babel/transform-runtime']
}
}
}
]
}
babel-plugin-transform-runtime 包含一個(gè)內(nèi)置的polyfill(它包含一個(gè)自定義的regenerator運(yùn)行時(shí)和core.js)，所以曼月，在webpack中使用 ProvidePlugin 用 shimming 方法定義 Promise 將不起作用谊却。
env preset
babel-preset-env 允許你指定一個(gè)代碼執(zhí)行環(huán)境，并且只編譯該環(huán)境缺少的特性哑芹。
而非 babel-pre-env 預(yù)設(shè)存在的問題在于它們往往做得太多炎辨。例如，大多數(shù)現(xiàn)代瀏覽器都支持ES6生成器绩衷。如果您使用 babel-preset-es2015 這些預(yù)設(shè)蹦魔，ES6生成器函數(shù)將始終被轉(zhuǎn)換為復(fù)雜的ES5代碼。
.babelrc 配置文件如下：
"presets": [
[
"env",
{
"targets": {
"browsers": ["last 2 versions", "ie >= 7"]
}
}
]
]
支持最近兩個(gè)版本的瀏覽器和IE7以上的瀏覽器咳燕。
其它babel插件
babel-plugin-tranform-classes // 解決ES6類（class）的兼容性
使用實(shí)踐
babel-core勿决，babel-preset-es2015，babel-polyfill招盲，
首先低缩，.babelrc 代碼如下：
{
"presets": ["es2015"]
}
然后，修改 webpack.config.js 代碼如下：
entry: {
app: ['babel-polyfill', './main.js']
},
babel-polyfill 還有其他的引入方式
babel-core，babel-preset-es2015咆繁，babel-transform-runtime
僅需要修改 .babelrc 代碼如下：
{
"presets": ["es2015"],
"plugins": ["transform-runtime"]
}
babel-core讳推，babel-preset-es2015，babel-transform-runtime, babel-preset-stage-*,
使用 babel-preset-stage-* 玩般，我們就是想使用一些更新的js特性银觅，以 babel-preset-stage-2 為例：
僅需要修改 .babelrc 代碼如下：
{
"presets": ["es2015", "es-stage-2"],
"plugins": ["transform-runtime"]
}
babel-core，babel-preset-es2015坏为，babel-transform-runtime, babel-preset-env
給我們的項(xiàng)目指定支持的瀏覽器和運(yùn)行環(huán)境究驴。
僅需要修改 .babelrc 代碼如下：
{
"presets": ["es2015"],
"plugins": ["transform-runtime"].
"env": {
"targets": {
"browsers": ["last 2 versions", "safari >= 7"], // 瀏覽器
"node": "6.10" // node
}
}
}
你可能發(fā)現(xiàn)這里沒有介紹 babel-cli, babel-register 和babel插件，解釋一下匀伏，這里主要是為了webpack的使用進(jìn)行的介紹洒忧，如果有很多人需要的話可以在做介紹。
下一篇babel的文章我會介紹够颠，如何在webpack中使用 babel-eslint 熙侍。
參考資料:
babel-preset-env: a preset that configures Babel for you
babel-preset-env from npmjs.com
babel中文參考手冊
其它關(guān)于webpack的系列文章webpack-learning
