如何用babel將ES6轉換爲指定的版本的ES代碼

因爲新版本的ECMASscript的強大特性，使咱們寫js代碼更加駕輕就熟，例如：calss，let，for...of，promise等等，但惋惜的是這些js新特新只被最新版本的瀏覽器支持，那麼指定範圍的低版本的瀏覽器的支持就須要一個專門的工具，babel就是這樣的一塊前端工具。

可是babel系列的插件如今愈來愈多，對於初次接觸使用它的人來講須要花費很多的時間，尤爲是討厭英文的人。

babel-6已經放棄了原來的babel包，取而代之的是各類轉換插件，剛開始，我也很納悶，爲何要分這麼多插件包呢，原先的一個很差嗎？隨着使用我麼發現，這些插件的職責分明，避免了‘一刀切’的問題，無論你需不須要都給你編譯。

babel-loader

這個包是由babel團隊開發的loader，用來告訴webpack我想要對個人js代碼進行兼容性編譯。

babel-loader 只是起到一個通知者的角色，通知babel你須要幹活了，在webpack的module中使用代碼以下：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules)/, // 不對node_modules目錄下的文件進行編譯，能夠提高webpack打包速度，其餘loader也有這個配置
      use: {
        loader: 'babel-loader',
        // loader: 'babel-loader?cacheDirectory', // 使用緩存目錄它能夠進一步提高webpack的編譯速度
        options: { // 這個配置項咱們通常單獨拿出來，建立一個‘.babelrc’文件來單獨存放配置項
          presets: ['@babel/preset-env']，// babel預設
          plugin: ['@babel/plugin-proposal-object-rest-spread'] // 所須要使用的插件
        }
      }
    }
  ]
}

babel-core

若是說 babel-loader 是告訴webpack我要對js文件進行代碼兼容性編譯，那麼，webpack接下來就是要找babel，而bable的入口就是 babel-core ，只有經過它，webpack才能使用各類babel的api（前提是你安裝了相關的api）。

babel-preset-es 和 babel-preset-stage-

babel-preset-es2015 ，babel-preset-es2016 ，babel-preset-es2017等等傻傻的分也分不清楚。

這些預設將支持ES6新語法的兼容性編譯。

將代碼轉化爲 ES3

babel-preset-es3

將代碼轉化爲 ES5

'babel-preset-es2015' ，
'babel-preset-stage-0' ，
'babel-preset-stage-1' ，
'babel-preset-stage-2' ，
'babel-preset-stage-3' ，

將代碼轉化爲 ES6

'babel-preset-es2016' 將ES2016轉化成ES6，
'babel-preset-es2017' 將ES2017轉化成ES6，

預設只能將ES6語法編譯爲你指定的ES版本語法，例如：箭頭函數，可是像 Array.from 這樣的API呢他無能爲力。那麼，怎麼辦呢，咱們下面來介紹幾種解決方案。

處理ES6 API

babel-polyfill

babel預設能夠編譯幾乎全部的JavaScript新語法，可是對於API卻不能解決，解決這個問題babel用的是 babel-polyfill (它有core-js和regenerator兩部分構成)。

執行安裝命令：

npm install --save-dev babel-polyfill

babel-polyfill 有三種引入方法。

1.那個模塊須要就在那個模塊引入，

require('babel-polyfill');

2.全局引入方法1，在項目的入口文件引入，若是項目有多個入口，則在每一個須要的入口分別加入。

require('babel-polyfill');

3.全局引入方法2，能夠在項目的 webpack.config.js 的入口配置項中引入。

entry: {
    app: ['babel-polyfill', './main.js']
},

這是第一種解決方案用來將ES6代碼編譯爲es5。可是這種方案，增長了一些沒必要要的代碼，webpack打包後的文件比較大，使用它還有一個問題就是容易形成全局污染。。

而剛恰好babel提供了babel-runtime。babel-plyfill咱們之前常常用，而babel-runtime，則是如今經常使用的。

babel-runtime

babel-runtime不會污染全局對象。如：當前的運行環境若是不支持Symbol，能夠訪問 babel-runtime/core-js/symbol 這裏從新定義了symbol，此外還有Promise，Set 和 Map 等。

babel-runtime 官方建議用在生產環境，而開發環境使用 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）函數做爲通用函數，例如：_extend 。默認狀況下，這類函數將被添加到每一個須要它的文件中。這時你可使用babel runtime做爲單獨的模塊來避免重複。

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules)/, // 不對node_modules目錄下的文件進行編譯，能夠提高webpack打包速度，其餘loader也有這個配置
      use: {
        loader: 'babel-loader',
        // loader: 'babel-loader?cacheDirectory', // 使用緩存目錄它能夠進一步提高webpack的編譯速度
        options: { // 這個配置項咱們通常單獨拿出來，建立一個‘.babelrc’文件來單獨存放配置項
          presets: ['@babel/preset-env']，// babel預設
          plugin: ['@babel/transform-runtime']
        }
      }
    }
  ]
}

babel-plugin-transform-runtime 包含一個內置的polyfill(它包含一個自定義的regenerator運行時和core.js)，因此，在webpack中使用 ProvidePlugin 用 shimming 方法定義 Promise 將不起做用。

env preset

babel-preset-env 容許你指定一個代碼執行環境，而且只編譯該環境缺乏的特性。

而非 babel-pre-env 預設存在的問題在於它們每每作得太多。例如，大多數現代瀏覽器都支持ES6生成器。若是您使用 babel-preset-es2015 這些預設，ES6生成器函數將始終被轉換爲複雜的ES5代碼。

.babelrc 配置文件以下：

"presets": [
    [
      "env",
      {
        "targets": {
          "browsers": ["last 2 versions", "ie >= 7"]
        }
      }
    ]
  ]

支持最近兩個版本的瀏覽器和IE7以上的瀏覽器。

其它babel插件

babel-plugin-tranform-classes // 解決ES6類（class）的兼容性

使用實踐

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

給咱們的項目指定支持的瀏覽器和運行環境。

僅須要修改 .babelrc 代碼以下：

{
    "presets": ["es2015"],
    "plugins": ["transform-runtime"].
    "env": {
        "targets": {
            "browsers": ["last 2 versions", "safari >= 7"], // 瀏覽器
            "node": "6.10" // node 
        }
    }
}

你可能發現這裏沒有介紹 babel-cli, babel-register 和babel插件，解釋一下，這裏主要是爲了webpack的使用進行的介紹，若是有不少人須要的話能夠在作介紹。

下一篇babel的文章我會介紹，如何在webpack中使用 babel-eslint 。

參考源代碼

參考資料:

babel-preset-env: a preset that configures Babel for you
babel-preset-env from npmjs.com
babel中文參考手冊

其它關於webpack的系列文章webpack-learning