一 歷史
HTML
- HTML 1, HTML 2, HTML 3 1991-1997 IETF(the Internet Engineering Task Force) 國際互聯網工程任務組
- 1997.1 HTML3.2 W3C
JavaScript
- 1995 liveScript(后改名為JavaScript1996年改名)
- 1996 javascript 1.0 1.1;
- 1997 Jscript
- 1997.6 ECMAScript 1.0
- 1998.6 ECMAScript 2.0
- 1999.12 ECMAScript 3.0
- 2000 ECMAScript 4.0 草案沒有通過 TC39
- 2007 ECMAScript 4.0 準備發布，不發布
- 2008.7 ECMAScript 3.1(改名為ECMA5) 大會項目代號(harmony)
- 2009.12
- ECMAScript5 正式發布
- javaScript.next(放入草案)
- javaScript.next.next(放入草案)
- 2011.6 ECMAScript5.1
- 2013.3 javaScript.next 草案凍結 ES6
- 2013.6 javaScript.next 草案發布 ES7
- 2015.6 ECMAScript6正式發布
- 從這開始，每年6月出ES6的新版本：ECMAScript2016 ECMAScript2017 ECMAScript2018都是ES6的幾次版本更迭
ES6 代表的是一個大版本并不是第幾年
總結概括 :ES6 既是一個歷史名詞，也是一個泛指，含義是 5.1 版以后的 JavaScript 的下一代標準，涵蓋了 ES2015、ES2016、ES2017 等等，而 ES2015 則是正式名稱，特指該年發布的正式版本的語言標準。本書中提到 ES6 的地方，一般是指 ES2015 標準，但有時也是泛指“下一代 JavaScript 語言”。
對ES5的支持
- 現代瀏覽器都支持ES5
can i use ES5?
| 瀏覽器版本 | release時間 |
|---|---|
| IE10 | 2012.09.04 |
| Edge12 | 2015.07.09 |
| Firefox21 | 2013.04.02 |
| Chrome23 | 2012.09.25 |
| Safari6 | 2012.07.25 |
| Opera15 | 2013.06.15 |
對ES6的支持
| 瀏覽器版本 | release時間 |
|---|---|
| IE | 部分支持 |
| Edge15 | 2017.04.11 |
| Firefox54 | 2017.06.13 |
| Chrome51 | 2016.05.26 |
| Safari10 | 2016.09.20 |
| Opera38 | 2016.06.08 |
二 編譯 - babel
什么是babel
實用參考
ES6 轉 ES5（如果用戶使用的是IE，不轉譯的情況，一些語法是不支持的）
我們使用 @babel/cli 從終端運行 Babel，利用 @babel/polyfill 來模擬所有新的 JavaScript 功能，而 env preset 只對我們所使用的并且目標瀏覽器中缺失的功能進行代碼轉換和加載 polyfill。
1. 基本使用
注意版本，版本不同會導致編譯報錯
- npm只能在node環境中實現，所以裝node時自動安裝了npm
- npm是包管理工具
- 安裝node 配置系統環境變量
- n npm的版本管理工具
1. 初始化項目 用init不要用i
npm init
2. 安裝核心庫、命令行工具
npm install --save-dev @babel/core @babel/cli
3. 預設：如果不進行任何配置，preset 所包含的插件將支持所有最新的 JavaScript （ES2015、ES2016 等）特性
npm install @babel/preset-env --save-dev
4.
配置script
babel后是要編譯的文件 也可以是文件路徑
lib是編譯文件輸出的路徑
"build": "babel app.js -d lib"
5. 配置babelrc
{"presets": ["@babel/preset-env"]
}
6. 編譯
npm run build
7. 運行node1方式
node lib/app.js
8. 運行babel-node方式
要先安裝babel-node
yarn add @babel/node -D
8.1)配置script
"myscript": "babel-node app.js"
8.2)執行
npm run myscript
不同配置指令 -o 指定文件編譯為指定文件
babel app.js -o bundle.js
-d 路徑 → 路徑 文件 → 路徑 編譯后文件和原文件同名
babel app.js -d bundle
2. 不轉碼ECMAScript2015新api
Babel 默認只轉換新的 JavaScript 句法（syntax），而不轉換新的
API，比如Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise等全局對象，以及一些定義在全局對象上的方法（比如Object.assign、Array.from等）都不會轉碼。
不轉譯內容
var newM = new Map();
可以通過babel-polyfill轉譯
npm install babel-polyfill -S
3. 作用
作者：尤雨溪
鏈接：https://www.zhihu.com/question/61124018/answer/184718397
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
babel 的存在不只是為了『使用 es 的所有新特性』。它需要考慮如下問題：如何處理尚未成為標準的提案？
建議你先了解一下 ECMAScript 的制定流程 (參考: http://wwsun.github.io/posts/new-in-es2016.html)，除了已經正式納入規范 (ES2015/6/7) 的特性，還有許多處于不同討論階段的特性提案 (stage 1/2/3/4)。這些討論中的特性嚴格來說還不算是標準，尤其是 stage 1/2 的特性，完全有可能被改動甚至是撤銷提案。因此從 babel 的角度來說，顯然不能夠默認啟用這些特性，而需要有可配置的選項讓用戶自行衡量風險，決定是否使用。
如何針對不同平臺的支持情況，減少無用特性的編譯。
默認目標通常是 ES5，但其實每個特性都有對應的性能開銷，babel 本來速度就不是很快，如果能針對目標平臺減少需要處理的特性，可以提高編譯效率，也可以盡量使用平臺原生的 ES 特性。比如如果只針對最新的 Chrome，大部分插件都是不需要的。有時候你可能只需要一兩個特定的插件，比如 syntax-dynamic-import。有時候你可能需要保留一些 ES 特性不編譯，比如使用 webpack 2 的時候保留 ES modules 語法不編譯為 CommonJS。這些都決定了可配置性是必需的。當然手動配置肯定很麻煩，這也是為什么現在有了 babel-preset-env，可以自動根據目標平臺分析需要用哪些插件。
作為一個編譯工具鏈，給予用戶實驗、甚至是實現非標準的語言擴展的能力。
Babel 的一個重要意義就在于能夠讓用戶提前使用尚未成為標準的語言特性，從而為標準本身的制定提供實踐中才能獲得的反饋。一個提案靠不靠譜，該不該成為標準？先做個插件出來用到項目里感受一下，比空口討論靠譜得多。
至于非標準擴展，比如 JSX 并非 ES 標準，但其編譯就是完全依賴 Babel 的可配置的插件能力才得以實現的。
另外，babel 作為一個工具鏈還可以有很多其他用途，比如用來進行編譯時的性能優化、測試覆蓋率的 instrumentation 等等。綜上，插件化是 babel 存在的核心價值，對于配置的問題，它的答案是 preset；對于題主的需求，用 babel-preset-env 的默認配置即可。另外如果沒有以上這些可配置性方面的需求，Buble (https://buble.surge.sh) 也是一個可以考慮的選擇，但 Buble 并不追求與規范 100% 的一致性，是否適合你，需要你自行判斷。
三 在線編譯
babel官網在線編譯
四 node對es6版本支持情況
node.green
實現跨組件通信)
