ES6-開發環境搭建（1）

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

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

一、使用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）

二、webpack + Babel 構建 ES6 開發平臺

2.1 搭建 webpack 基本文件目錄

1. 首先全局安裝webpack（這裏使用 webpack@3.12.0 版本）

   npm install -g webpack@3

2. 新建一個文件夾，命名爲 webpack_demo；
3. 命令行切換到 webpack_demo的文件目錄下，執行下面的命令， 生成默認 package.json 配置文件

   npm init -y

4. 利用 npm 安裝 webpack

   npm i --save-dev webpack@3

5. 新建 webpack.config.js（用於配置 webpack 的運行方式），最簡單的配置以下：

   module.exports= {

   /* webpack 入口起點 */
   entry:'./index.js',
   /* webpack 輸出 */
   output:{
       // 輸出 文件名
       filename:'./test.js'
   },

   }

2.2 安裝babel相關

1. 安裝 babel-core 包
   npm i --save-dev babel-core
2. 安裝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 結合在一塊兒

1. 須要在二者之間創建一條紐帶，而經過 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 代碼了：

三、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

四、直接在線編譯

Babel提供一個REPL在線編譯器，能夠在線將ES6代碼轉爲ES5代碼。

轉換後的代碼，能夠直接做爲ES5代碼插入網頁運行。

五、總結

使用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的相關原理、機制。