3.3 ECMAScript 和 Babel

js 和ECMAScript

• 不严谨的，js= 和ECMAScript+Dom+Bom。
• 更严谨的，js= 和ECMAScript+宿主API。
• ECMAScript是个标准，js是ECMAScript的一个实现子集
• Bom和Dom是宿主浏览器暴露给js的API，与js语言的规范无关
• 同理，nodejs也暴露了相应的API

JavaScript名字由来

• js之前有两个名字，liveScript 和 Mocha
• Brendan 设计js的初衷是为了开发一种能在NetScape Navigator中运行的类似java的语言，但是java不灵活和太复杂，所以放弃了对java特性和语法的模仿
• NetScape和Sun公司达成协议，将名字命名为JavaScript，搭上java这种热名词汇作为一种推广手段

js 和 微软的JScript

• js推出后不久，微软推出JScript
• 两者在用法上有很大差异，开发者不得不做很多兼容在Navigator浏览器和IE浏览器上
• js 和 微软的JScript的冲突，只是微软和网景浏览器大战的一个缩影。两家浏览器在宿主机制，脚本语言，css，html等多个方面都存在巨大差异
• 当时JScript已经实现服务器端渲染了，这是领先js的一个方面

缓解浏览器大战，统一脚本语言

• 1996年，NetScape公司向ECMA国际递交了js标准化方案，就是ECMA-262标准
• 之所以叫ECMAScript，为了缓解微软和网景的命名争论
• 1997年，ECMAScript第一版发布了，就是ES1
• 1998年，ECMAScript第二版发布了，就是ES2
• 1998年，ECMAScript第三版发布了，就是ES3
• ES4 提案的特性比较激进，所以TC39委员会内部两极分化，ES4提案被废弃。只保留了很少的特性，以ES3 harmony版本发布。严格意义上，没有ES4
• 2009年，ES5发布了
• 2015年，ES6发布了，带着很多ES4的特性
• TC39改变发布策略，不再跨度长时间发布，而是每年增加少量特性

ES4 被废弃的原因

• 当时的浏览器和js引擎不能承载大规模的web应用程序
• 但现在，随着浏览器自身功能的增强，V8等js引擎性能的提升，html5的localStorage等设备底层权限。
• 现在，浏览器客户端可以支撑庞大的web应用程序

ES6的跨时代意义

• 加入了高级语言的特性，比如类，静态模块体系，块级作用域
• 加强了前端的规范意识

微软的edge浏览器

• ECMAScript规范虽然一定程度上，缓解了浏览器之间的战争，但是硝烟从未消失
• 即使在ES5时代，IE仍然坚持着自己的策略，这依赖于windows系统庞大的用户量
• 微软在浏览器的贡献是不可磨灭的，但是IE还是有一些特性（ActiveX，VB脚本）挑战着用户容忍度
• 虽然IE占着绝对领先的地位，但越来越多的用户青睐chrome和firefox。原因很多，不可忽视的原因是，能够更加流畅地运行复杂的web应用程序，实现IE不能实现的功能。支持这些功能的力量是因为支持了ECMAScript和css3和html5等新特性。
• 2015年旧金山build大会上，微软公布了新的浏览器品牌，Edge
• IE11 和Edge 已经可以支持新特性和新规范了，但是chrome对新规范的实现还是领先地位

babel之前，js如何编程

• 在兼容IE8和bind（）函数之间做选择。放弃bind函数后，可以自行封装或者使用Jquery库函数。
• js编程是直接面向目标浏览器的，技术选型，API使用，最重要考虑的是浏览器兼容
• 有时为了兼容，功能上都要打折
• 面向浏览器编程的好处，源代码不需要任何处理，直接在浏览器上运行，便于调试。缺点，大量时间搞兼容
• 正是因为兼容性的原因，jquery库很popular
• 当时的开发模式是，开发人员处理兼容问题，js的构建只是最基础的压缩和打包

babel，真正意义的js编译

• 目前浏览器对ECMASCript规范的实现远远落后于规范更新的速度，即使最新版的chrome都不能完全支持
• ES6的新特性和语法糖给编程带了很多便利，但是由于兼容性又不能直接用。这时babel就出现了（借鉴css预编译器理念），将源代码转换成浏览器能运行的代码
• IE浏览器的落寞和移动Web的崛起，另许多Web应用程序放弃了对老版本浏览器的兼容。这是babel大规模应用的环境因素。
• babel根据具体的配置参数决定编译输出的具体语法，所有的配置参数都是由针对的浏览器决定的。比如要兼容IE8，需要配置babel将部分ES6语法转换成ES3语法
• ES6的几行代码，ES5可能要几十行代码。ES6的开发效率和可维护性是很高的

babel和webpack实现js构建

• 完全可单独使用babel进行编译，但babel和webpack结合打造完整的构建体系和前端工程化体系
• babel-loader是babel官方提供的webpack插件

babel-preset-env

• babel 提供丰富的preset插件供开发者根据项目具体需求进行自由搭配，比如babel-preset-es2015插件是一个集合，包含了es6到es5的所有插件
• 实际开发中，浏览器版本不同，有些es6语法不需要转换。比如chrome59以上，支持箭头函数，就没有必要转化了
• 你可以自己自由搭配各个插件，来提出冗余的部分。但很麻烦，你必须知道每个浏览器版本支持的规范
• babel-preset-env 可以自动搭配插件，你只要告诉它要兼容浏览器的版本。
• babel-preset-env 根据官方的数据得到浏览器支持的规范，再自动组合需要的插件

babellrc文件

• 使用babel-loader在webpack中进行options配置有一个致命缺点，只编译符合规则的文件，比如.js
• 但有些框架也要用babel编译，比如.vue
• vue-loader 是针对vue文件的webpack编译插件，但不能想当然的以为vue-loader 就能转换es6到es5了。因为babel-loader没有对vue中的js代码进行编译
• 解决方案，就是用babellrc文件取代babel-loader的options。同时新增项目会增加.babellrc文件