一：理解 babel之配置文件.babelrc 基本配置項(xiàng)

1. 什么是babel? 它是干什么用的？

ES6是2015年發(fā)布的下一代javascript語(yǔ)言標(biāo)準(zhǔn)，它引入了新的語(yǔ)法和API，使我們編寫(xiě)js代碼更加得心應(yīng)手，比如class，let,for...of promise等等這樣的，但是可惜的是這些js新特性只被最新版本的瀏覽器支持，但是低版本瀏覽器并不支持，那么低版本瀏覽器下就需要一個(gè)轉(zhuǎn)換工具，把es6代碼轉(zhuǎn)換成瀏覽器能識(shí)別的代碼，babel就是這樣的一個(gè)工具?？梢岳斫鉃?babel是javascript語(yǔ)法的編譯器。

2. Babel編譯器

• 在Babel執(zhí)行編譯的過(guò)程中，會(huì)從項(xiàng)目的根目錄下的 .babelrc文件中讀取配置。.babelrc是一個(gè)json格式的文件。
• 在.babelrc配置文件中，主要是對(duì)預(yù)設(shè)(presets) 和 插件(plugins) 進(jìn)行配置。.babelrc配置文件一般為如下：

{
  "plugins": [
     [
      "transform-runtime",
      {
        "polyfill": false
      }
     ]
   ],
   "presets": [
     [
       "env",
       {
         "modules": false
       }
     ],
     "stage-2",
     "react"
  ]
}

2.1 plugins

該屬性是告訴babel要使用那些插件，這些插件可以控制如何轉(zhuǎn)換代碼。

1. 理解 babel-polyfill 和 babel-runtime 及 babel-plugin-transform-runtime

Babel默認(rèn)只轉(zhuǎn)換新的javascript語(yǔ)法，而不轉(zhuǎn)換新的API，比如 Iterator, Generator, Set, Maps, Proxy, Reflect,Symbol,Promise 等全局對(duì)象。以及一些在全局對(duì)象上的方法(比如 Object.assign)都不會(huì)轉(zhuǎn)碼。
比如說(shuō)，ES6在Array對(duì)象上新增了Array.form方法，Babel就不會(huì)轉(zhuǎn)碼這個(gè)方法，如果想讓這個(gè)方法運(yùn)行，必須使用 babel-polyfill來(lái)轉(zhuǎn)換等。

因此：babel-polyfill和babel-runtime就是為了解決新的API與這種全局對(duì)象或全局對(duì)象方法不足的問(wèn)題，因此可以使用這兩個(gè)插件可以轉(zhuǎn)換的。

那么他們兩者的區(qū)別是什么？

babel-polyfill 的原理是當(dāng)運(yùn)行環(huán)境中并沒(méi)有實(shí)現(xiàn)的一些方法，babel-polyfill會(huì)做兼容。
babel-runtime 它是將es6編譯成es5去執(zhí)行。我們使用es6的語(yǔ)法來(lái)編寫(xiě)，最終會(huì)通過(guò)babel-runtime編譯成es5.也就是說(shuō)，不管瀏覽器是否支持ES6，只要是ES6的語(yǔ)法，它都會(huì)進(jìn)行轉(zhuǎn)碼成ES5.所以就有很多冗余的代碼。
babel-polyfill 它是通過(guò)向全局對(duì)象和內(nèi)置對(duì)象的prototype上添加方法來(lái)實(shí)現(xiàn)的。比如運(yùn)行環(huán)境中不支持Array.prototype.find 方法，引入polyfill, 我們就可以使用es6方法來(lái)編寫(xiě)了，但是缺點(diǎn)就是會(huì)造成全局空間污染。
babel-runtime: 它不會(huì)污染全局對(duì)象和內(nèi)置對(duì)象的原型，比如說(shuō)我們需要Promise，我們只需要import Promise from 'babel-runtime/core-js/promise'即可，這樣不僅避免污染全局對(duì)象，而且可以減少不必要的代碼。

雖然 babel-runtime 可以解決 babel-polyfill中的避免污染全局對(duì)象，但是它自己也有缺點(diǎn)的，比如上，如果我現(xiàn)在有100個(gè)文件甚至更多的話，難道我們需要一個(gè)個(gè)文件加import Promise from 'babel-runtime/core-js/promise' 嗎？那這樣肯定是不行的，因此這個(gè)時(shí)候出來(lái)一個(gè) 叫 babel-plugin-transform-runtime，它就可以幫助我們?nèi)ケ苊馐謩?dòng)引入 import的痛苦，并且它還做了公用方法的抽離。比如說(shuō)我們有100個(gè)模塊都使用promise，但是promise的polyfill僅僅存在1份。
這就是 babel-plugin-transform-runtime 插件的作用。

2. 理解 babel-plugin-transform-runtime 的配置一些選項(xiàng)

因此通過(guò)上面的理解，我們可以對(duì) transform-runtime 通過(guò)如下配置 plugins; 如下代碼：

{
  'plugins': [
    [
      'transform-runtime', 
      {
        'helpers': false,
        'polyfill': false,
        'regenerator': true,
        'moduleName': 'babel-runtime'
      }
    ]
  ]
}

配置項(xiàng)可以看官網(wǎng)，查看官網(wǎng)

helpers: 默認(rèn)值為true，表示是否開(kāi)啟內(nèi)聯(lián)的babel helpers(即babel或者環(huán)境本來(lái)存在的某些對(duì)象方法函數(shù))如：extends，etc這樣的在調(diào)用模塊名字時(shí)將被替換名字。
polyfill：默認(rèn)值為true，表示是否把內(nèi)置的東西(Promise, Set, Map)等轉(zhuǎn)換成非全局污染的。
regenerator：默認(rèn)值為true，是否開(kāi)啟generator函數(shù)轉(zhuǎn)換成使用regenerator runtime來(lái)避免污染全局域。
moduleName：默認(rèn)值為 babel-runtime，當(dāng)調(diào)用輔助 設(shè)置模塊（module）名字/路徑.

比如如下這樣設(shè)置：

{
  "moduleName": "flavortown/runtime"
}

import引入文件如下這個(gè)樣子：

import extends from 'flavortown/runtime/helpers/extends';

3 presets
presets屬性告訴Babel要轉(zhuǎn)換的源碼使用了哪些新的語(yǔ)法特性，presets是一組Plugins的集合。

3.1 理解 babel-preset-env

比如：

babel-preset-es2015: 可以將es6的代碼編譯成es5.
babel-preset-es2016: 可以將es7的代碼編譯為es6.
babel-preset-es2017: 可以將es8的代碼編譯為es7.
babel-preset-latest: 支持現(xiàn)有所有ECMAScript版本的新特性。

舉個(gè)列子，比如我們需要轉(zhuǎn)換es6語(yǔ)法，我們可以在 .babelrc的plugins中按需引入一下插件
比如：check-es2015-constants、es2015-arrow-functions、es2015-block-scoped-functions等等幾十個(gè)不同作用的plugin：那么配置項(xiàng)可能是如下方式：

// .babelrc
{
  "plugins": [
    "check-es2015-constants",
    "es2015-arrow-functions",
    "es2015-block-scoped-functions",
    // ...
  ]
}

但是Babel團(tuán)隊(duì)為了方便，將同屬ES2015的幾十個(gè)Transform Plugins集合到babel-preset-es2015一個(gè)Preset中，這樣我們只需要在.babelrc的presets加入es2015一個(gè)配置就可以完成全部ES2015語(yǔ)法的支持了：
如下配置：

// .babelrc
{
  "presets": [
    "es2015"
  ]
}

但是我們隨著時(shí)間的推移，將來(lái)可能會(huì)有跟多的版本插件,比如 bebel-preset-es2018,.... 等等。
因此 babel-preset-env 出現(xiàn)了，它的功能類(lèi)似于 babel-preset-latest，它會(huì)根據(jù)目標(biāo)環(huán)境選擇不支持的新特性來(lái)轉(zhuǎn)譯。

首先需要在項(xiàng)目中安裝，如下命令：

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

在.babelrc配置文件中 可以如下簡(jiǎn)單的配置：

{ 
  "presets": ['env']
}

我們還可以?xún)H僅配置項(xiàng)目所支持的瀏覽器的配置

1. 支持每個(gè)瀏覽器最后兩個(gè)版本和safari大于等于7版本所需的polyfill代碼轉(zhuǎn)換，我們可以如下配置：

{
  'presets': [
    ['env', {
      'target': {
        'browsers': ['last 2 versions', 'safari >= 7']
      }
    }]
  ]
}

2. 支持市場(chǎng)份額超過(guò)5%的瀏覽器，可以如下配置：

{
  'presets': [
    ['env', {
      'target': {
        'browsers': '> 5%'
      }
    }]
  ]
}

3. 指定瀏覽器版本，可以如下配置：

{
  'presets': [
    ['env', {
      'target': {
        'chrome': 56
      }
    }]
  ]
}

Node.js
如果通過(guò)Babel編譯Node.js代碼的話，可以設(shè)置 "target.node" 是 'current', 含義是 支持的是當(dāng)前運(yùn)行版本的nodejs。
如下配置代碼：

{
  "presets": [
    ["env", {
      "targets": {
        "node": "current"
      }
    }]
  ]
}

理解 babel-preset-env 中的選項(xiàng)配置：
1. targets: {[string]: number | string }, 默認(rèn)為{};
含義是支持一個(gè)運(yùn)行環(huán)境的對(duì)象，比如支持node版本；可以如下配置： node: '6.0';
運(yùn)行環(huán)境: chrome, opera, edge, firefox, safari, ie, ios, android, node, electron

2. targets.browsers <Array | string>
支持瀏覽器的配置項(xiàng)，該配置項(xiàng)使用方式可以到 browserslist來(lái)查詢(xún)（https://github.com/browserslist/browserslist）
比如上面的 支持每個(gè)瀏覽器最后兩個(gè)版本和safari大于等于7版本。如上配置。

3. modules
該參數(shù)的含義是：?jiǎn)⒂脤S6模塊語(yǔ)法轉(zhuǎn)換為另一種模塊類(lèi)型。將該設(shè)置為false就不會(huì)轉(zhuǎn)換模塊。默認(rèn)為 'commonjs'.
該值可以有如下：
'amd' | 'umd' | 'systemjs' | 'commonjs' | false

我們?cè)陧?xiàng)目中一般會(huì)看到如下配置，設(shè)置modules: false, 如下代碼配置：

"presets": [
   'env',
   {
     'modules': false
   }
]

這樣做的目的是：以前我們需要使用babel來(lái)將ES6的模塊語(yǔ)法轉(zhuǎn)換為AMD, CommonJS，UMD之類(lèi)的模塊化標(biāo)準(zhǔn)語(yǔ)法，但是現(xiàn)在webpack都幫我做了這件事了，所以我們不需要babel來(lái)做，因此需要在babel配置項(xiàng)中設(shè)置modules為false，因?yàn)樗J(rèn)值是commonjs, 否則的話，會(huì)產(chǎn)生沖突。

4. loose, 該參數(shù)值默認(rèn)為false。
含義是：允許它們?yōu)檫@個(gè) preset 的任何插件啟用”loose” 轉(zhuǎn)換。

5. include: 包含一些插件，默認(rèn)為 [];
比如包含箭頭函數(shù)，可以如下配置：

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      },
      "include": ["transform-es2015-arrow-functions", "es6.map"]
    }]
  ]
}

6. exclude； 排除哪些插件，默認(rèn)為 [];
比如 排除生成器，可以如下配置：

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      },
      "exclude": ["transform-regenerator", "es6.set"]
    }]
  ]
}

3.2 理解 babel-presets-stage-x
官方預(yù)設(shè)(preset), 有兩種，一個(gè)是按年份(babel-preset-es2017)，一個(gè)是按階段(babel-preset-stage-0)。 這主要是根據(jù)TC39 委員會(huì)ECMASCRPIT 發(fā)布流程來(lái)制定的。因此到目前為止 有4個(gè)不同的階段預(yù)設(shè)：

babel-preset-stage-0

babel-preset-stage-1

babel-preset-stage-2

babel-preset-stage-3

以上每種預(yù)設(shè)都依賴(lài)于緊隨的后期階段預(yù)設(shè)，數(shù)字越小，階段越靠后，存在依賴(lài)關(guān)系。也就是說(shuō)stage-0是包括stage-1的，以此類(lèi)推。因此 stage-0包含stage-1/2/3的內(nèi)容。所以如果我們不知道需要哪個(gè)stage-x的話，直接引入stage-0就好了。

stage0 (https://babeljs.io/docs/en/babel-preset-stage-0) 只是一個(gè)美好激進(jìn)的想法，一些 Babel 插件實(shí)現(xiàn)了對(duì)這些特性的支持 ，但是不確定是否會(huì)被定為標(biāo)準(zhǔn).
stage1 (https://babeljs.io/docs/en/babel-preset-stage-1) 值得被納入標(biāo)準(zhǔn)的特性.
stage2 (https://babeljs.io/docs/en/babel-preset-stage-2) 該特性規(guī)范己經(jīng)被起草，將會(huì)被納入標(biāo)準(zhǔn)里.
stage3 (https://babeljs.io/docs/en/babel-preset-stage-3) 該特性規(guī)范已經(jīng)定稿，大瀏覽器廠商和 Node.js 社區(qū)己開(kāi)始著手實(shí)現(xiàn).

但是在我們使用的時(shí)候只需要安裝你想要的階段就可以了：比如 babel-preset-stage-2， 安裝命令如下：

npm install --save-dev babel-preset-stage-2

二：在webpack中配置babel

在上面了解了babel后，現(xiàn)在我們需要知道如何在webpack中使用它了。由于babel所做的事情是轉(zhuǎn)換代碼，所有需要使用loader去轉(zhuǎn)換，因此我們需要配置babel-loader。

在安裝babel-loader之前，我們需要安裝babel-core， 因?yàn)閎abel-core是Babel編譯器的核心，因此也就意味著如果我們需要使用babel-loader進(jìn)行es6轉(zhuǎn)碼的話，我們首先需要安裝 babel-core, 安裝命令如下即可：

npm install --save-dev babel-core

然后我們?cè)侔惭b babel-loader, 命令如下：

npm install --save-dev babel-loader

接著我們需要安裝 babel-preset-env, babel-plugin-transform-runtime, babel-preset-stage-2, 如下命令安裝

npm install --save-dev  babel-preset-env babel-plugin-transform-runtime babel-preset-stage-2

因此 .babelrc 配置如下即可：

{
  "plugins": [
     [
      "transform-runtime",
      {
        "polyfill": false
      }
     ]
   ],
   "presets": [
     [
       "env",
       {
         "modules": false
       }
     ],
     "stage-2"
  ]
}

在做demo之前，我們還是先看下目錄結(jié)構(gòu)變成如下：

### 目錄結(jié)構(gòu)如下：
demo1                                       # 工程名
|   |--- dist                               # 打包后生成的目錄文件             
|   |--- node_modules                       # 所有的依賴(lài)包
|   |--- js                                 # 存放所有js文件
|   | |-- demo1.js  
|   | |-- main.js                           # js入口文件
|   |
|   |--- webpack.config.js                  # webpack配置文件
|   |--- index.html                         # html文件
|   |--- styles                             # 存放所有的css樣式文件                              
|   |--- .gitignore  
|   |--- README.md
|   |--- package.json
|   |--- .babelrc                           # babel轉(zhuǎn)碼文件

因此webpack配置中需要添加 babel-loader 配置，如下配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/, // 排除文件
        loader: 'babel-loader'
      }
    ]
  }
}

webpack 所有配置如下代碼

const path = require('path');
// 提取css的插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ClearWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry: './js/main.js',
  output: {
    filename: 'bundle.js',
    // 將輸出的文件都放在dist目錄下
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist'
  },
  mode: 'development',
  module: {
    rules: [
      {
        // 使用正則去匹配要用該loader轉(zhuǎn)換的css文件
        test: /\.css$/,
        loaders: ExtractTextPlugin.extract({
          // 轉(zhuǎn)換 .css文件需要使用的Loader
          use: ['css-loader']
        })
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '[name].[ext]'
        }
      },
      {
        test: /\.js$/,
        exclude: /(node_modules)/, // 排除文件
        loader: 'babel-loader'
      }
    ]
  },
  resolve: {
    // modules: ['plugin', 'js']
  },
  externals: {
    jquery: 'jQuery'
  },
  devtool: 'source-map',
  plugins: [
    // new ClearWebpackPlugin(['dist']),
    new ExtractTextPlugin({
      // 從js文件中提取出來(lái)的 .css文件的名稱(chēng)
      filename: `main.css`
    })
  ]
};

package.json 安裝依賴(lài)包如下：

{
  "name": "demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --progress --colors --devtool source-map --hot --inline",
    "build": "webpack --progress --colors"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-2": "^6.24.1",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^1.0.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "path": "^0.12.7",
    "style-loader": "^0.21.0",
    "uglifyjs-webpack-plugin": "^1.2.7",
    "url-loader": "^1.0.1",
    "webpack": "^4.16.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "jquery": "^3.3.1"
  }
}

現(xiàn)在我們繼續(xù)在 main.js 代碼內(nèi) 編寫(xiě) Generator 函數(shù)，代碼如下：

function* g() {
  yield 'a';
  yield 'b';
  yield 'c';
  return 'ending';
}

var gen = g();
console.log(gen.next()); // 返回Object {value: "a", done: false}

for(let a of [1,2,3,4]) {
  console.log(a); // 打印出 1, 2, 3, 4
}

然后重新運(yùn)行打包命令 npm run dev 后，打開(kāi)瀏覽器運(yùn)行 可以看到控制臺(tái)輸出 {value: "a", done: false}，說(shuō)明babel已經(jīng)轉(zhuǎn)譯了。