ES6 版本與 Babel

這是我參與8月更文挑戰的第4天，活動詳情查看：8月更文挑戰

ECMAScript 版本歷史

1. HTML

   HTML1，HTML2，HTML3，1991 - 1997 由 IETF 組織制定

   IETF：The Internet Engineering Task Force，國際互聯網工程任務組

2. HTML3.2

   1997.1 發佈，至今歸屬於 W3C 組織（萬維網聯盟）

3. JavaScript

   1995，網景公司推出 LiveScript，爲蹭 Java 熱度，聯合發佈 JavaScript

   1996，JavaScript1.0、1.1 發佈

   1997，微軟 JScript 發佈（徹底照抄 JavaScript）

   1997.6，ECMAScript1.0 發佈（以 JavaScript1.0 爲藍本）

   1998.6，ECMAScript2.0 發佈

   1999.12，ECMAScript3.0 發佈

   2000，ECMAScript4.0 草案沒有被經過，調整幅度太大

   2007，ECMAScript4.0 準備發佈，依然沒有經過

   2008.7，在 3.0 基礎上推出 ECMAScript3.1，改名爲 ECMAScript5

   2009.12，將 4.0 分爲三部分，一部分做爲 ES5 正式發佈，另外 javascript.next，javascript.next.next 兩部分放入草案中

   2011.6，ECMAScript5.1 發佈，成爲 ISO 標準

   2013.3，javascript.next 草案凍結

   2013.6，javascript.next 草案發布

   2015.6，ECMAScript6 正式發佈

4. ECMAScript

   ECMA 即歐洲計算機制造聯合會，制定腳本語言規範了 ECMA-262，聽從該規範的腳本語言成爲 ECMAScript

   ECMAScript2015/2016/2017 等都屬於 ES6，每一年都會有小版本的改動

Babel 搭建環境

Babel 介紹

1. Babel 用於將 ES6 代碼轉譯爲瀏覽器可執行的 ES5 代碼
2. 參考網站：Babel 中文網

安裝配置

1. 首先使用 npm init 將項目交由 npm 管理依賴（生成 package.json 文件）

2. 安裝 babel 轉譯規則集和腳手架

   npm i -D babel-preset-env
   npm i -D babel-cli
   複製代碼

3. 項目根目錄建立 .babelrc 文件，指定規則集

   {
     "presets": ["babel-preset-env"]
   }
   複製代碼

4. package.json 的 scripts 屬性中添加命令

   "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "babel-build": "babel app.js"
     }
   複製代碼

5. 根目錄下的 app.js 中使用了 ec6 語法

   const fnc = () => {
       console.log('es6 箭頭函數')
   }
   
   fnc();
   複製代碼

6. 執行 npm run babel-build 後根目錄下生成 bundle.js

   'use strict';
   
   var fnc = function fnc() {
       console.log('es6 箭頭函數');
   };
   
   fnc();
   複製代碼

7. 同理，使用 babel src -d lib 指令能夠將 src 下的 js 文件所有轉譯到 lib 文件夾下

   "scripts": {
       "babel-build-src": "babel src -d lib"
     }
   複製代碼

8. 使用 babel-node 執行代碼

   "scripts": {
       "babel-node": "babel-node ./src/app.js"
     }
   複製代碼

   npm run babel-node 便可執行 app.js（node 環境）

瀏覽器中使用

1. 使用 babel-standalone 在瀏覽器中轉譯 es6 語法

2. 使用 cdn 方式引入，將 es6 代碼 script 標籤指定爲 text/babel

   <div id="js-box"></div>
   <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.11.6/babel.min.js"></script>
   <script type="text/babel"> const getMsg = ()=> { return 'Message' } document.getElementById('js-box').innerHTML = getMsg() </script>
   複製代碼

使用 ES6 API

1. Babel 默認只對 ES6 語法進行轉譯，不包含 ES6 的新增 API

   如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局對象，以及一些定義在全局對象上的方法（Object.assign...）

2. 使用 babel-plyfill 提供新增 API 的支持

   npm install --S babel-polyfill
   複製代碼

   引入 babel-plyfill

   require("babel-polyfill")
   // 或
   import "babel-polyfill"
   複製代碼