es6 babel編譯

本文主要參照阮一峰的es6入門，為提高自己寫了一份隨筆。

原文地址請戳這里  ECMAScript 6 入門

 

ECMAScript 6是JavaScript語言的下一代標准。因為當前版本的ES6是在2015年發布的，所以又稱ECMAScript 2015。

但是目前瀏覽器對es6不完全兼容，需要借住babel編譯。

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

node 安裝babel ；

$ npm install --save-dev babel-preset-es2015
配置 .babelrc文件在目錄下。

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

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

presets字段設定轉碼規則，官方提供以下的規則集，你可以根據需要安裝。

# ES2015轉碼規則 $ npm install --save-dev babel-preset-es2015 # react轉碼規則 $ npm install --save-dev babel-preset-react # ES7不同階段語法提案的轉碼規則（共有4個階段），選裝一個 $ 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 

然后，將這些規則加入.babelrc。

 { "presets": [ "es2015", "react", "stage-2" ], "plugins": [] }

命令行轉碼babel-cli

Babel提供babel-cli工具，用於命令行轉碼。

$ npm install --global babel-cli  //在全局安裝

$ npm install --save-dev babel-cli //在項目中安裝
然后初始化項目
$npm init 
配置一些基本的參數。

{
  // ...
  "devDependencies": {  //開發依賴
    "babel-cli": "^6.0.0"
  },
  "scripts": {　　
    "build": "babel src -d lib"  //src下面的js文件，轉碼到lib文件下。
  },
}

 

然后執行　　$ npm run build

或者執行常用的命令行。

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

babel-register 

babel-register模塊改寫require命令，為它加上一個鈎子。此后，每當使用require加載.js、.jsx、.es和.es6后綴名的文件，就會先用Babel進行轉碼。

$ npm install --save-dev babel-register

使用時，必須首先加載babel-register。

require("babel-register");
require("./index.js");

然后，就不需要手動對index.js轉碼了。

   需要注意的是babel-register只會對require命令加載的文件轉碼，而不會對當前文件轉碼。另外，由於它是實時轉碼，所以只適合在開發環境使用。