1. 程式人生 > >《es6標準入門》讀書筆記-第一章 ECMAScript 6簡介

《es6標準入門》讀書筆記-第一章 ECMAScript 6簡介

以下內容使用的書籍為《es6標準入門-第2版》,阮一峰著,如有需要請購買正版
本文僅為個人讀書筆記,如有不詳之處請查閱原文

執行環境

node環境的檢查

  • 檢視node對es6的支援狀況
$ node --v8-option | grep harmory
$ npm install -g es-checker
$  es-checker

babel轉碼器

babel安裝

$ npm install --glabel bael-cli
$ npm install --save babel-preset-2015

在當前目錄新建.babelrc檔案

// .babelrc
{
    preset:[2015]
}

babel功能

babel-node 可直接執行es6程式碼

$ babel-node
> cosnole.log([1,2,3].map(x=>x*x))
  [1,4,9]

babel-node 可直接執行指令碼
@(es6.js)

cosnole.log([1,2,3].map(x=>x*x))
  [1,4,9]
$ babel-node es6.js

babel命令可以將es6檔案轉為es5檔案此處不是babel-node

$ babel es6.js
  "user strict"
console.log([1,2,3].map(function(x){ return x*x }))

輸出引數
- -o 輸出至某檔案

$ baebl es6.js -o  es5.js
  • -d 轉換整個目錄
$ baebl -d es6 es5
  • -s 輸出source-map
$ baebl -d es6 es5 -s

瀏覽器環境

babel6開始不再提供瀏覽器版本,而使用構建工具構建
可以使用以下方法安裝5.x版本

$ node install label-core@5

並於頁面中使用

 <script src
="node_module/babel-core/browser.js">
</script> <script type="text/babel"> //enter your code </script>

此種做法會對瀏覽器效能產生影響,在script標籤中需要註明 text/babel

配合Browserify可以生成瀏覽器能夠直接載入的指令碼
- 首先安裝babelify

$ npm isntall --save-dev babelify babel-preset-2015 
  • 然後用命令列轉至es6指令碼
$ browsweify script.js -o bundle.js  \ -t [ babelify --presets[ es2005 react]

上面程式碼將script.js 轉為bundle.js,瀏覽器可直接載入bundle.js
建立package.json,可不必輸入引數

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

node.js環境

如果需要在node中將es6轉為es5,需要安裝如下:

$ npm install --save babel-core babel-preset-2015

在當前目錄新建.babelrc檔案

// .babelrc
{
    preset:[2015]
}

在指令碼檔案的最後呼叫babel-core的transform方法

var es5Code='let x=n=>n+1';
var es6Code=rquire('babel-core').transform(es5Code,{preset:['es2015']});
//"user strict";\n\nvar x=function(n){\n return n+1;\n}

設定鉤子做法,這將會對所有後面引入的js,es6,es,jsx檔案進行轉碼載入

rquire('babel-core/register');

注意:babel預設不會轉換Iterator,Generator,Set,Map,Proxy,Reflext,Symbol,Promise等全域性物件以及一些定義在全域性物件上的方法,需要安裝babel-polyfill模組來進行擴充套件

$ npm install --save babel-polyfill

然後在所有指令碼頂部引入

rquire('babel-polyfill');

線上轉換

Traceur轉碼器

Google公司的線上轉碼器@Traceur
具體步驟略,有興趣的可以去看看原書