Babel 入門學習筆記

前言

跟著公司項目進行了好幾個月的時間了。一直沒仔細的過一遍項目中所用到的東西。由此先從babel、webpack、mocha等內容入手。簡單記錄學習筆記。

JavaScript 的 ES6/7規範中新特性的加入（比如箭頭函數、async/await等），可以讓開發者書寫更優雅、簡潔的代碼。但是由於各大瀏覽器並未全面實現最新的ECMAScript規範。為了更好的兼容性，想要使用這些新特性就必須將ES6/7代碼轉換為ES5代碼供瀏覽器運行。

Babel是一個廣泛使用的轉碼器，可以將ES6/7代碼轉為ES5代碼，從而在現有環境執行。

// 轉碼前[1,2,3].map(item => item + 1)// 轉碼後[1,2,3].map(function (item) { return item + 1})

第一次接觸babel是和 webpack 一起使用。babel-loader 作為webpack 的 loader使用。一股腦把webpack、babel、mocha 這些東西都扔過來，還真的容易混淆。

其實babel單獨使用的時候，配置還是比較清晰易懂的。

配置文件.babelrc

此文件存儲在項目根目錄下，用於設置轉碼規則和一些轉碼要用的插件。使用babel必需要配置這個文件。基本格式如下（看起來好簡單）：

{ "presets": [], "plugins": []}

plugins 欄位為：你想使用的轉換規則插件 （此處查看）

presets 欄位為：預設規則集 （不想自己單獨配置各個plugins時，或沒有特殊plugin需求，可直接使用預設規則集）

presets 分為官方維護的規則集和npm社區維護的規則集。

官方規則集如下：（按需安裝）

# env轉碼規則$ npm install --save-dev babel-preset-env# ES每年規範的轉碼規則$ npm install --save-dev babel-preset-es2015$ npm install --save-dev babel-preset-es2016$ npm install --save-dev babel-preset-es2017# react轉碼規則$ npm install --save-dev babel-preset-react# flow靜態類型檢查轉碼規則$ npm install --save-dev babel-preset-flow# ES7不同階段*語法提案*的轉碼規則$ npm install --save-dev babel-preset-stage-0$ npm install --save-dev babel-preset-stage-1$ npm install --save-dev babel-preset-stage-2$ npm install --save-dev babel-preset-stage-3# stage-4 完成: 將被添加到下一個年度版本$ npm install --save-dev babel-preset-stage-4

然後將安裝好的規則加入到 .babelrc 文件中

{ "presets": ["es2017", "react"], "plugins": []}

其中 babel-preset-env 規則可以根據配置的目標運行環境（environment）自動啟用需要的 babel 插件。（可以避免 環境（瀏覽器、node...）已經原生實現規範，Babel卻還將代碼轉換為繁瑣的ES5代碼）

並且官方文檔提到：

Each yearly preset only compiles what was ratified in that year. babel-preset-env replaces es2015, es2016, es2017 and latest

每年預設僅編譯當年批准的內容。 babel-preset-env取代了es2015，es2016，es2017和最新版本

所以配置.babelrc更加簡單。

{ "presets": ["env"], "plugins": []}

或者

{ "presets": [["env", options]], "plugins": []}

上面的 options 可以配置運行 平台等信息。 此處不再展開。

可以看這篇文章詳解：A preset that configures Babel for you

配置完畢，接下來可以使用了

命令行babel-cli

babel-cli 為 Babel 提供的命令行工具

安裝：

$ npm install --global babel-cli

基本用法如下：

# 不加參數按預設轉碼example.js文件$ babel example.js# 設置轉碼結果輸出文件# --out-file 或 -o 參數指定輸出文件$ babel example.js --out-file compiled.js# 或者$ babel example.js -o compiled.js# 整個目錄轉碼# --out-dir 或 -d 參數指定輸出目錄$ babel src --out-dir lib# 或者$ babel src -d lib

Babel-cli 使用詳細文檔

babel-node

babel-cli自帶一個babel-node 命令。可以直接用來執行 ES6 腳本。

例如新建文件hello.js：

const hello = (name) => { console.log(Hello + name)}hello(victor)

那麼使用babel-node可直接執行：

$ babel-node hello.jsHello victor

babel-polyfill

babel默認只轉換新的句法（箭頭函數、const、let等）。而不會轉換新增的API（例如：全局對象Promise、Set、Maps，靜態方法Array.from、Object.assign，實例方法Array.prototype.includes等）。

如果想讓這類方法和對象運行，必須使用 babel-polyfill，為當前環境提供一個 膩子/墊片。

安裝：

$ npm install --save babel-polyfill

然後在腳本頭部引用即可：（確保在所有代碼運行之前調用）

import babel-polyfill// orrequire(babel-polyfill)

結語

babel 還有很多功能和更深入的東西。但是目前我用到的基本就這些。這些東西算是到了夠用的程度。更深入的學習還需要啃官方文檔和前輩的文章。重點是結合實踐效率更高。babel還可以和webpack mocha 等打包測試工具配合使用。後續會記錄更多學習筆記。

第一次寫筆記。掌握的還是不夠詳細。需要以後實踐中反覆驗證之後再修改。