stage?es6?es7?速覽javascript版本和babel配置

我是死肥宅發表於2018-12-09
JavaScriptBabel

javacsript歷史

1995 年網景瀏覽器首次釋出瀏覽器指令碼，給它命名為liveScript，一年後改名javascript。

1996 年，網景將 JavaScript 提交給 ECMA International（歐洲計算機制造商協會） 進行標準化，並最終確定出新的語言標準，它就是 ECMAScript。自此，ECMAScript 成為所有 JavaScript 實現的基礎。

2012年，ECMAScript 第 6 版在六月份公佈之前，又被重新命名為了 ECMAScript 2015（ES2015）

  • ECMAScript：一個由 ECMA International 進行標準化，TC39 委員會進行監督的語言。通常用於指代標準本身。
  • JavaScript：ECMAScript 標準的各種實現的最常用稱呼。這個術語並不侷限於某個特定版本的 ECMAScript 規範，並且可能被用於任何不同程度的任意版本的 ECMAScript 的實現。
  • ECMAScript 5 (ES5)：ECMAScript 的第五版修訂，於 2009 年完成標準化。這個規範在所有現代瀏覽器中都相當完全的實現了。
  • ECMAScript 6 (ES6) / ECMAScript 2015 (ES2015)：ECMAScript 的第六版修訂，於 2015 年完成標準化。這個標準被部分實現於大部分現代瀏覽器。可以查閱這張相容性表來檢視不同瀏覽器和工具的實現情況。
  • ECMAScript 2016：第七版 ECMAScript 修訂
  • ECMAScript Proposals：被考慮加入未來版本 ECMAScript 標準的特性與語法提案，他們需要經歷五個階段：Strawman（稻草人），Proposal（提議），Draft（草案），Candidate（候選）以及 Finished （完成）。

ECMAScript中間每一個提案，都要依次經過 stage 0、stage 1、stage 2、stage 3、stage 4 五個階段。其中到達 stage4 的為已通過，會出現在下一年的釋出中。到達 stage3 的屬於比較成熟的，極有可能在較小改動的前提下通過併發布，stage3 之前的則不太成熟，stage 越往前越容易大幅改動甚至被完全去掉。所以對於開發者來說，使用 stage 3 之前的語法有一定風險

在這裡可以檢視各個提案的狀態：

babel

babel-cli

  • 安裝
yarn add babel-cli -D
複製程式碼
  • 使用
babel 原始檔 d 編譯後的檔案
複製程式碼
  • 配置

在根目錄下建立.babelrc檔案，eg:

{
  "preset": [],
  "plugins": []
}
複製程式碼

babel-preset

  • flow：包含 flow type 所需外掛
  • es2015：包含 es2015 語法標準所有相關外掛
  • es2016：包含 es2016 語法標準所有相關外掛
  • es2017：包含 es2017 語法標準所有相關外掛
  • latest：包含從 2015 開始歷年語法標準所有相關外掛
  • env：在 latest 基礎上提供環境配置能力，比如可以配置只支援某一個瀏覽器的某幾個版本，會自動按需啟用、禁用外掛
  • stage-0：包含處於標準提案 stage 0 階段的語法所有相關外掛
  • stage-1：包含處於標準提案 stage 1 階段的語法所有相關外掛
  • stage-2：包含處於標準提案 stage 2 階段的語法所有相關外掛
  • stage-3：包含處於標準提案 stage 3 階段的語法所有相關外掛

babel-register

只需要引入babel-register就可以執行babel，但不適合生產環境，生產環境應該預先編譯好程式碼，可以在本地使用

  • 安裝
yarn add babel-register
複製程式碼
  • 使用
// 在入口檔案頂部引入
import 'babel-register'
複製程式碼

babel-polyfill

通過babel編譯過的程式碼並不是所有環境都能執行，babel-polyfill可以在當前執行環境中用來複制尚不存在的API的程式碼，讓開發者可以提前使用還不可用的APIs

  • 使用
// 在入口檔案頂部引入
import 'babel-polyfill'
複製程式碼

babel-runtime

babel為了保持生成程式碼的整潔，會把一些為了相容的輔助工具程式碼放進統一的“執行時”中去，就不需要在每個檔案中引入輔助程式碼了，必須安裝babel-plugin-transform-runtime和 babel-runtime

  • 安裝
yarn add babel-plugin-transform-runtime -D
yarn add babel-runtime -D
複製程式碼
  • 配置
{
  "plugins": [
    "transform-runtime",
    "transform-es2015-classes"
  ]
}
複製程式碼
  • 效果
// 編譯前
class Foo {
  method() {}
}

// 編譯後
import _classCallCheck from "babel-runtime/helpers/classCallCheck";
import _createClass from "babel-runtime/helpers/createClass";

let Foo = function () {
  function Foo() {
    _classCallCheck(this, Foo);
  }

  _createClass(Foo, [{
    key: "method",
    value: function method() {}
  }]);

  return Foo;
}();
複製程式碼

配置babel

  • 外掛
// .babelrc
{
  "plugins": [
    // 這裡新增外掛
    ["transform-es2015-classes", { "loose": true }]
  ]
}
複製程式碼
  • 環境

當前環境可以使用 process.env.BABEL_ENV 來獲得。 如果 BABEL_ENV 不可用，將會替換成 NODE_ENV，並且如果後者也沒有設定，那麼預設值是"development"

{
  "env": {
    // 開發環境配置
    "development": {
      "plugins": [...]
    },
    // 生產環境配置
    "production": {
      "plugins": [...]
    }
  }
}
複製程式碼
  • target

可以配置最低的執行環境

{
  "targets": {
    "chrome": "58",
    "ie": "11"
  }
}
複製程式碼

最後

ok！babel的配置和javascript歷史還是挺有關係的，理解了javascript歷史能夠更好的理解babel的配置

參考連結

babel手冊

相關文章