古語有云：「君子生非異也，善假於物；工欲善其事，必先利其器。」

由於有些低版本的瀏覽器還是不支持ES6語法，學習ES6，首先要學會搭建一個基本的ES6開發環境，利用工具，把ES6的語法轉變成ES5的語法。

1、使用Babel把ES6編譯成ES5

1.1 建立工程目錄

先建立一個項目的工程目錄，並在目錄下邊建立兩個文件夾：dist 和 src

1.2 初始化項目

在安裝Babel之前，需使用npm init先初始化我們的項目。通過cmd打開命令行工具，進入項目目錄，輸入下邊的命令：

npm init -y

命令執行完成後，會在項目根目錄下生產package.json文件。

1.3 全局安裝Babel-cli

npm install -g babel-cli

1.4 本地安裝轉碼規則

npm install --save-dev babel-preset-es2015 babel-cli

安裝完成後，我們可以看一下我們的package.json文件，已經多了devDependencies選項。

1.5 新建.babelrc

在根目錄下新建.babelrc文件，.babelrc是Babel的配置文件。

該文件是用來設置轉碼規則和插件的，基本格式如下：

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

1.6 babel基本用法

# 轉碼結果輸出到標準輸出
$ 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

# -s 參數生成source map文件
$ babel src -d lib -s

在src目錄下，新建index.js文件，使用ES6中的 let聲明和字元串模板

let name = Bread and Dream;
let greeting = `hello ${name}`;

在命令行輸入

babel src/index.js -o dist/index.js

這時dist目錄會生成 index.js 文件，輸出結果為：

use strict;

var name = Bread and Dream;
var greeting = hello + name;

項目文件最終結構

1.7 簡化轉化命令：

使用babel命令行，一大長串，很容易忘記，所以，我們可以進行改造，打開package.json文件，添加以下代碼

{
"scripts": {
"build": "babel src/index.js -o dist/index.js"
},
}

修改好後，以後我們就可以在命令行輸入 npm run build 進行轉換了。

（註：build是自定義的，為了語義化命名為build，當然也可以命名成其他的，例如 compile）

2、webpack + Babel 構建 ES6 開發平台

2.1 搭建 webpack 基本文件目錄

首先全局安裝webpack（這裡使用 [email protected] 版本）
npm install -g webpack@3

新建一個文件夾，命名為 webpack_demo；

命令行切換到 webpack_demo的文件目錄下，執行下面的命令， 生成默認 package.json 配置文件
npm init -y

利用 npm 安裝 webpack
npm i --save-dev webpack@3

新建 webpack.config.js（用於配置 webpack 的運行方式），最簡單的配置如下：
module.exports= { ? / webpack 入口起點 / ? entry:./index.js, ? / webpack 輸出 / ? output:{ ? // 輸出 文件名 ? filename:./test.js ? }, }

2.2 安裝babel相關

安裝 babel-core 包 ? npm i --save-dev babel-core
安裝babel-preset-env 和 babel-preset-stage-0 包 ? npm i --save-dev babel-preset-env babel-preset-stage-0 ? babel-preset-env 是一個主流的 Babel 插件數組；Stage-X 是實驗階段的 Presets

2.3 將 webpack 和 Babel 結合在一起

需要在兩者之間建立一條紐帶，而通過 webpack 的 loaders 就可以生成這條紐帶，因此要修改 webpack.config.js 配置文件：
/ webpack loaders 配置 / module:{ ? rules:[ ? { ? test:/.js$/, ? use:{ ? loader:babel-loader, ? }, ? } ? ], },

就是針對以 .js 結尾的文件使用 babel-loader。由於項目中還不存在 babel-loader，所以要先安裝該模塊：

npm i --save-dev babel-loader

  1. 通過使用 loader 語法配置 Babel 的 presets

使用 webpack 提供的方法，具體在 webpack.config.js 的 module.rules.use.options 中配置

/* webpack loaders 配置 */
module:{
rules:[
{
test:/.js$/,
use:{
loader:babel-loader,
options:{
presets:[
babel-preset-env,
babel-preset-stage-0
]
}
},
}
],
},

最終的項目結構為：

在當前目錄下執行 webpack 命令

webpack

輸入文件 index.js 中的ES6代碼已經被轉換成輸出文件 test.js 中的 ES5 代碼了：

3、Traceur轉碼器

Google公司的Traceur轉碼器，也可以將ES6代碼轉為ES5代碼。

3.1 直接在頁面中使用：

<!-- 載入Traceur編譯器 -->
<script src="http://google.github.io/traceur-compiler/bin/traceur.js" type="text/javascript"></script>
<!-- 打開實驗選項，否則有些特性可能編譯不成功 -->
<script>
traceur.options.experimental = true;
</script>

寫ES6代碼，用：

<script type="module">
// ES6代碼
</script>

注意：script標籤的type屬性的值是module，而不是text/javascript。這是Traceur編譯器識別ES6代碼的標識。

3.2 Traceur的命令行轉換方法：

首先需要用npm安裝。

$ npm install -g traceur

直接運行ES6代碼，以index.js為例

$ traceur index.js

將ES6輸出為ES5腳本

$ traceur --script index.js --out es5.js

為了防止有些特性編譯不成功，最好加上–experimental選項。

$ traceur --script index.js --out es5.js --experimental

4、直接在線編譯

Babel提供一個REPL在線編譯器，可以在線將ES6代碼轉為ES5代碼。

轉換後的代碼，可以直接作為ES5代碼插入網頁運行。

5、總結

使用babel搭建環境的順序：

  1. 創建項目創建兩個文件夾src和dist
  2. 使用npm init 初始化項目生成package.json（項目信息文件）
  3. 使用 npm install -g babel-cli 全局安裝
  4. 使用 npm install –save-dev babel-preset-es2015 babel-cli本地安裝
  5. 創建.babelrc文件（babel轉換的配置文件）
  6. 在src下創建js，編寫ES6語法
  7. babel src/index.js -o dist/index.js轉碼生成ES5語法

babel 本質就是一個 JavaScript 編譯器，通過：

  1. 將 JavaScript 源代碼解析成抽象語法樹（AST）；
  2. 將源代碼的 AST 結果一系列轉換生成目標代碼的 AST；
  3. 將目標代碼的 AST 轉換成 JavaScript 代碼。

當然，感興趣的小夥伴可以深入研究下babel及其插件的源碼，了解其運行機制，以便更全面的掌握ES6轉ES5的相關原理、機制。

推薦閱讀：

相关文章