最近在學(xué)習(xí)javascript es6，也在看javascript es6標準入門，所以結(jié)合了這本書的內(nèi)容寫了一個讀書筆記，希望對入門學(xué)習(xí)ES6的同學(xué)有點幫助。

 

 

 

運行環(huán)境

node環(huán)境的檢查

 

查看node對es6的支持狀況

$ node --v8-option | grep harmory

 

阮一峰自寫插件 @github

$ npm install -g es-checker

$  es-checker

 

babel轉(zhuǎn)碼器

 

babel安裝

$ npm install --glabel bael-cli

$ npm install --save babel-preset-2015

在當(dāng)前目錄新建.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文件轉(zhuǎn)為es5文件此處不是babel-node

$ babel es6.js

  "user strict"

  console.log([1,2,3].map(function(x){

      return x*x

  }))

輸出參數(shù)

-o 輸出至某文件

$ baebl es6.js -o  es5.js

 

-d 轉(zhuǎn)換整個目錄

$ baebl -d es6 es5

 

-s 輸出source-map

$ baebl -d es6 es5 -s

 

瀏覽器環(huán)境

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

$ node install label-core@5

并于頁面中使用

 <script src="node_module/babel-core/browser.js"></script>

 <script type="text/babel">

 //enter your code

 </script>

此種做法會對瀏覽器性能產(chǎn)生影響，在script標簽中需要注明 text/babel

配合Browserify可以生成瀏覽器能夠直接加載的腳本

首先安裝babelify

$ npm isntall --save-dev babelify babel-preset-2015

 

然后用命令行轉(zhuǎn)至es6腳本

$ browsweify script.js -o bundle.js  \\ -t [ babelify --presets[ es2005 react]

上面代碼將script.js 轉(zhuǎn)為bundle.js,瀏覽器可直接加載bundle.js
建立package.json，可不必輸入?yún)?shù)

{

  "browserify":{

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

  }}

 

node.js環(huán)境

 

如果需要在node中將es6轉(zhuǎn)為es5，需要安裝如下：

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

在當(dāng)前目錄新建.babelrc文件

// .babelrc

{

  preset:[2015]

}

在腳本文件的最后調(diào)用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}

設(shè)置鉤子做法，這將會對所有后面引入的js,es6,es,jsx文件進行轉(zhuǎn)碼加載

rquire('babel-core/register');

 

注意:babel默認不會轉(zhuǎn)換Iterator,Generator,Set
,Map,Proxy,Reflext,Symbol,Promise等全局對象以及一些定義在全局對象上的方法，需要安裝babel-polyfill模塊來進行擴展

 

$ npm install --save babel-polyfill

 

然后在所有腳本頂部引入

 

rquire('babel-polyfill');

 

 

原文來自：簡書／tinlee