《es6標準入門》讀書筆記-第一章 ECMAScript 6簡介
阿新 • • 發佈:2019-01-02
以下內容使用的書籍為《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
具體步驟略,有興趣的可以去看看原書