?

系列文章 -- ES6筆記系列

?

雖然ES6已經發布一年多了，但在各大瀏覽器之中的支持度還不是很理想，在這查看 ES6新特性支持度

Chrome的最新版本瀏覽器大部分已經支持，在Node.js環境上支持度更好一些，可原生使用，但實際上更多的做法是用其他工具將ES6轉碼成支持度更好的ES5

這些工具有babel轉碼器、traceur轉碼器?等，用得最多的應該是babel

?

?

一、Babel環境的配置

Babel用于將ES6語法轉換成ES5語法，例如

1 /* ES6 */ 2 var arr = [1, 2, 3]; 3 4 arr.filter((item) => { 5 return item % 2; 6 }); 7 8 9 /* ES5 */ 10 var arr = [1, 2, 3]; 11 12 arr.filter(function (item) { 13 return item % 2; 14 });

?

1. Node.js環境

Node.js環境下可使用?babel-cli?命令行工具進行轉換，首先安裝這個工具 npm i -g babel-cli

要進行轉碼，得先配置babel轉碼的方式，根目錄下添加一個配置文件 .babelrc

Win7下直接添加會報錯，這里可以用命令行的方式改名

文件中指明要轉換的方式

{"presets": ["es2015"] }

其中，presets表示一些將要使用到的插件集合，更多用法

用到的es2015插件還得先安裝好

?

試著轉碼一下

可以將結果指定輸出到某個文件

還可以指定目錄

可以像Node那樣直接在命令行編寫代碼

查看 更多命令參數

?

2. 瀏覽器環境

在瀏覽器環境下也可以進行ES6的轉碼，不過網頁端實時的轉換或多或少會影響性能，所以最好時網頁直接使用轉換好的代碼

可直接引入standalone提供的?轉碼腳本文件

　　<script src="babel.min.js"></script><script type="text/babel">var arr = [1, 2, 3];arr.filter((item) => {return item % 2;});console.log(arr);</script>

?

二、使用瀏覽器的原生支持

使用阮爺的es-checker檢測各特性的支持度

可見在Chrome最新版下支持度還是挺好的，所以我們可以直接在Chrome下練習基本的ES6語法

?

三、使用Node.js的原生支持

同樣使用es-checker模塊來檢測支持度

所以也可以在Node環境下練手支持的新特性

?

轉載于:https://www.cnblogs.com/imwtr/p/5892693.html

總結

以上是生活随笔為你收集整理的ES6笔记（1） -- 环境配置支持的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。