ES6-1 ES6版本过渡历史

一 历史

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