使用Babel兼容ES6新特性

一、問題背景

ES5項目中需要使用ES6的一些新特性時，需要對代碼做額外處理，才能使得瀏覽器正常運行代碼。

假設有這樣一種場景，我需要在項目中使用import/export引入導出一個模塊的時候，運行可能會報以下錯誤：

SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

原因是引入ES6的一些關鍵詞的時候，出現不兼容的現象。那麼爲了處理這個問題，通常做法是將ES6代碼轉換爲ES5代碼，可以藉助Babel(以前叫6to5)、Trancer等庫進行轉換。比較常用的是Babel。

二、Babel解決方案

關於上面提到的import錯誤的問題，網上也有很多教程是如何安裝配置Babel解決問題的。但是可能大多數教程用的是babel@6，但Babel已經升級了一個大版本至babel@7了，所以仍舊使用babel@6版本問題可能解決不了，還額外新增一些錯誤。另外，特別注意的是babel的6、7版本不能混合使用！！！作爲一個剛接觸babel的小白，差點沒被坑死，所以大家還是當看到引入使用某個庫解決問題的時候，還是花點時間瞭解一下新的動態，避免多走彎路。

以上都是題外話。以下說一下如何在項目中安裝配置babel@7。

首先安裝以下依賴，babel@7中的core、preset、plugin等工具類安裝都需要加上“@babel/”的前綴。preset安裝env就可以了，env中兼容了es2015、es2016等，所以可以省略安裝es2015、stage-0。

npm install --save-dev babelify
npm install --save-dev @babel/core
npm install --save-dev @babel/preset-env
npm install --save-dev @babel/plugin-transform-runtime

接着配置.babelrc文件。如果沒有，就在項目的根目錄下新建一個。配置如下：

{
    "presets": ["@babel/preset-env"],
    "plugins": [
        "@babel/plugin-transform-runtime"
    ]
}

在第7版中，注意preset、plugin引入使用的時候要與安裝名一致。

然後，我的項目是使用browserify的，所以還需要在package.json中配置以下選項：

"browserify": {
    "transform": [
      [
        "babelify"
      ]
    ]
}

完成以上三個步驟，不出意外的話就可以解決ES6兼容的問題了。但是web技術日新月異，未來解決方案也能會產生變動，所以以上僅供參考。