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

標籤：學習筆記   轉碼   react   file   build   介紹   reg   下一代   uil   

本文摘自阮一峰老師的《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"] }]]     } }

 

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