ES6入門一：ES6簡介及Babel轉碼器

時間 2019-11-21

標籤 es6 入門簡介 babel 欄目 JavaScript 简体版

原文原文鏈接

ES6簡介
Babel轉碼器
Nodejs中使用ES6
WebPack中使用ES6及Babel轉碼插件

1、ES6簡介與轉碼

1.1一個常見的問題，ECMAScript和JavaScript究竟是什麼關係？javascript

1996年11月，JavaScript的創造者——Netscape公司，決定將JavaScript提交給國際標準化組織ECMA，但願JavaScript這種語言可以成爲國際標準。
1997年,ECMA發佈262號標準文件（ECMA-262）的初版，規定了瀏覽器腳本語言的標準，並將這種語言稱爲ECMAScript，這個版本就是ES1.0。
ECMA全稱European Computer Manufactuers Association，翻譯過來的中文名叫作「歐洲計算機制造聯合會」，這個組織的目標是評估，開發和承認電信和計算機標準。始建於1961年，可是爲了創建統一的電腦操做格式標準--包括程序語言和輸入輸出的組織。

一個常見的追問，爲何使用ECMAScript這個名稱，而不是JavaScript？java

一是商標問題：Java是Sun公司的註冊商標，根據受權協議，只有Netscape公司能夠合法的使用JavaScript這個名字，並且JavaScript自己也已被Netscape公司註冊爲商標。
二是語言全部歸屬問題：ECMAScript這個名稱體現出這門語言的制定者是ECMA，而不是Netscape，這樣有利於保證這門語言的開放性和中立性。

因此，ECMAScript和Javascript的關係是，前者是後者的規格，後者是前者的一種實現。另外ECMAScript方言還有JScript和ActionScript。git

1.2ES6與ECMAScript2015的關係？github

ECMAScript2015簡稱爲ES2015。2011年ECMAScript 5.1版本發佈，6.0版本開始制定，ES6這個詞原意指javascript的下一個版本。可是因爲這個版本引入的版本語法太多，並且制定過程當中還有不少組織和我的提交新功能。所以，不可能在同一個版本里包含全部將要引進的功能。常規的作法是先發布6.0版本，而後過段時間發佈6.1，6.2，6.3.....版本。可是標準委員會爲了讓標準升級成爲常規流程，讓任何人在任什麼時候候均可以提交新語法提案，而後標準委員會每月開一會，評估這些提案是否能夠接受，須要哪些改進。通過屢次會議後，若是一個提按足夠成熟即可進入標準。而後，每一年6月發佈一次標準。chrome

ES6第一個版本就這樣在2015年6月發佈，正式名稱是《ECMAScript2015標準》（簡稱ES2015）。一般ES6被泛指爲ES5.1版本的下一代標準，涵蓋ES201五、ES201六、ES2017等。也有人稱ES2016爲ES七、ES2017爲ES8，以這樣的方式描述的化今年的ES2019就是ES10。npm

注：ECMAScript迭代的目的是爲了讓JS語言能用於編寫複雜的大型應用程序，成爲企業級開發語言。json

TC39（Technical Committee 39）是一個推進JavaScript發展的委員會，github鏈接：https://github.com/tc39，官方網站：https://tc39.es/若有興趣瞭解最新JS提案能夠查看這兩個網站。瀏覽器

歐洲計算機制造商協會官網：https://www.ecma-international.orgbabel

1.3Babel轉碼器工具

因爲瀏覽器還存在一些對新語法的支持，特別是在老版本的瀏覽器上，爲了在開發中可使用新的語法在瀏覽器和其餘環境中能夠執行，能夠藉助轉碼工具將新語法轉碼成ES5，來實現生產開發的統一性，可是不是全部新語法均可以被轉碼的。

新的語法並不改變語言的特性，只是在原有的語法基礎上新增一些語法糖。只是爲了增長代碼的可讀性，從而減小代碼的出錯機會。

Babel官網：https://www.babeljs.cn/

Babel在線工具：https://www.babeljs.cn/repl

配置安裝及說明：

1 npm init -y //初始化項目配置（自動生成一個package.json文件）
2 npm install @babel/core --save-dev //在當前工做區間安裝babel/core插件
3 npm install @babel/cli --save-dev //在當前工做區間安裝babel/cli插件
4 npm install @babel/preset-env --save-dev //在當前工做區間安裝babel/preset-env插件
5 npm install @babel/polyfill --save-dev //在當前工做區間安裝babel/plyfill插件

@babel/core ：babel核心工具包，用來將JS代碼轉換成抽象語法樹

@babel/cli ：babel手腳架，用來開啓指定調用插件編譯代碼

@babel/preset-env：babel具體解析ES6語法的工具集合，這個集合只用來解析新的js語法，不轉換新的API

@babel/polyfill ：babel用來解析新的API，好比：Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（好比Object.assign、Array.from）。這裏有一篇使用教程：https://blog.csdn.net/qq_21294095/article/details/88812344

配置文件.babelrc

該文件用來設置轉碼規則和插件，基本格式以下：

1 {
2     "presets": [
3         //預設編譯插件
4         "@babel/preset-env"
5     ],
6     "plugins": [
7         //引用外部編譯插件
8     ]
9 }

測試babel編譯：

let a = 10; //在當前工做區間下建立一個index.js文件並寫入這行代碼

使用bebel/cli命令編譯index.js文件

npx babel index.js -o compiled.js

編譯完成後會在當前工做區間下新增一個compiled.js文件，文件裏面的內容以下：

1 "use strict";
2 
3 var a = 10;

--watch實現時實監聽編譯，就是隻須要編譯一次後，只要在修改源文件，編譯文件就會自動生成最新的代碼

npx babel index.js -o compiled.js --watch

ES7語法的編譯插件（支持私有屬性）：

在class中寫靜態屬性並賦值的方式，是ES7的寫法，在老版本的瀏覽器中不能識別（報錯），我是用最新的chrome瀏覽器已經能識別。可是，目前來說瀏覽器能不能識別並不重要，由於咱們在使用ES6仍是ES7的時候都會使用編譯工具進行降級，在babel中我使用的7.5.5版本都不支持編譯示例中的靜態屬性的語法，在編譯的時候回報如下錯誤：

Support for the experimental syntax 'classProperties' isn't currently enabled (2:11):

  1 | class Foo{
> 2 |   static e = [1,2,3];
    |            ^
  3 |   static bar(){
  4 |           return "bar";
  5 |   }

但同時，在後面babel也提示了能編譯這個語法的插件：

Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.

下載插件：

npm install @babel/plugin-proposal-class-properties --save-dev

而後在（.babel文件中配置，這種模式任選一種配置，這裏我選擇了寬鬆模式）：

 1 //嚴格模式
 2 {
 3   "plugins": ["@babel/plugin-proposal-class-properties"]
 4 }
 5 //寬鬆模式（我測代碼時使用了這個）
 6 {
 7   "plugins": [
 8     ["@babel/plugin-proposal-class-properties", { "loose": true }]
 9   ]
10 }

關於插件的配置詳細手冊能夠查看babel的官方手冊：https://babeljs.io/docs/en/babel-plugin-proposal-class-properties

私有方法的插件：

使用私有方法時，babel編譯器還須要一個的插件：

npm install @babel/plugin-proposal-private-methods --save-dev

而後，再.babel文件中配置：

1 {
2     "presets":[
3         "@babel/preset-env"
4     ],
5      "plugins": [
6         ["@babel/plugin-proposal-private-methods", { "loose": true }] //引入支持編譯私有方法的插件
7     ]
8 }

詳細能夠了解：https://babeljs.io/docs/en/babel-plugin-proposal-private-methods#via-cli

ES7裝飾器（Decorator）轉碼插件：

npm install --save-dev @babel/plugin-proposal-decorators

在.babelrc中配置裝飾器：

1 {
2   "plugins": [
3     ["@babel/plugin-proposal-decorators", { "legacy": true }],
4     ["@babel/plugin-proposal-class-properties", { "loose" : true }]
5   ]
6 }

裝飾器配置手冊：https://babeljs.io/docs/en/babel-plugin-proposal-decorators#legacy

一個裝飾器問題：https://github.com/WarnerHooh/babel-plugin-parameter-decorator/issues/1

...未完待續。