JavaScript 學習筆記-- ES6學習（一）介紹以及Babel的使用

本文摘自阮一峯老師的《ECMAScript 6入門》，原文地址：http://es6.ruanyifeng.com/#docs/intro

 

ECMAScript 6 是一個泛指，含義是5.1版本後的JavaScript的下一代標準，涵蓋了ES2015, ES2016, ES2017等。

Babel轉碼器是一個普遍使用的ES6轉碼器，能夠將ES6轉碼爲ES5。

 

配置文件：.babelrc

配置文件基本格式：

// .babelrc
{
  「presets」: [],
  "plugins": [],
}

使用babel先要安裝規則集，安裝完後加入到配置文件中。官方的規則集以下：

# 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-ci 模塊

babel-ci模塊是在命令行中使用babel, 使用babel命令能夠直接對文件進行轉碼，對於項目來講，能夠直接將其寫在package.json中，而後將命令放在scripts 中。

安裝命令以下：

$ npm install --global-cli

 

基本用法以下：

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

# 安裝
$ npm install --save-dev babel-cli

// package.json
{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  "scripts": {
    "build": "babel src -d lib"
  },
}

 

babel-register 模塊

babel-register模塊改寫require命令，爲它加上一個鉤子，此後，每當使用require加載.js, .jsx, 和.es6後綴名的文件，就會先用Babel進行轉碼：

$ npm install --save-dev babel-register

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

注意： babel-register只會對require命令加載的文件轉碼，而不會對當前文件轉碼。

 

Babel能夠用於瀏覽器環境，不過從6.0版本開始，再也不直接提供瀏覽器版本，而是要用構建工具構建出來。

babel 和browserify 配合使用：

{   
  "browserify": 
  {     
    "transform": [["babelify", { "presets": ["es2015"] }]]   
  } 
}