浏览器兼容性 和 Transpilation
你的 web 浏览器可能每隔几个月就会提示你去更新，你知道为什么吗，主要是一些安全漏洞，新特性，以及支持新的 HTML、CSS 和 JavaScript 语法。
也就是说，在一个浏览器发布新版之前会有一段时间，存在安全漏洞和不支持的新语法。
这已经是 Web 开发人员普遍关注的一个问题，2015 年，标准化组织发布了 ECMAScript2015，通常被称为 ES6，上一个版本是 ES5。
发布之后，开发者们都很快采用了新的语法，因为它可以提高开发效率和可读性。但是当时大多数浏览器都不支持 ES6，所以就存在这种兼容性问题。
两个解决浏览器兼容问题的重要工具：
caniuse.com——提供最新的各种 PC 和 移动设备浏览器对前端 web 技术的支持情况
Bable—是一个 JavaScript 库，可以用它将 ES6 转成 ES5，从而运行在大部分浏览器上
因为浏览器对 ES6 的新特性是逐渐添加进去的，所以需要自己去查找这些浏览器的兼容情况。
Why ES6？ 为什么用 ES6？
和其他语言更相似的语法——语义上更接近其它面向对象编程对象，当有经验的非 JavaScript 开发者想学习 JavaScript 时会更容易。
可读性和经济性——新语法更容易理解，实现同样的功能需要更少的代码
解决了一些 ES5 的 bug——ES5 的一些语法导致的常见的bug，ES6 的新语法可以减少一些常见的错误
所以 Web 开发者很快开始使用 ES6，但浏览器的支持却是滞后的。
因此 ES6 的新语法是向后兼容的，你可以将 ES6 代码映射成 ES5 版本的。
使用 Babel 进行 Transpilation
Transpilation 就是把一种语言的代码转换成另一种语言的过程。
npm init // 根目录创建 package.json
npm install babel-cli -D // -D表示将 package 添加到 package.json 中的 devDependencies 属性中
npm install babel-preset-env -D
npm run build
.babelrc
通过根目录创建一个 .babelrc 文件，你就可以指定源 JavaScript 的版本
touch .babelrc
在文件中添加下面这个对象，["env"] 表示要从 ES6+ 的版本转换代码
{ "presets": ["env"] }
Babel Source Lib
在运行 npm run build 之前，还需要一个操作——在 package.json 中的 scripts 属性中，有一个 test 属性，在 test 属性下面，添加一个 build 属性，如下：
... "scripts": { "test": "echo "Error: no test specified" && exit 1", "build": "babel src -d lib" }
"babel src -d lid" 命令行参数
babel——Babel 命令
src——指示转换 src 目录中的所有 JavaScript 代码
-d——表示将转换后的代码写入一个目录下
lib——转换后的代码存放路径
Review 小结
ES5——所有现代浏览器都支持的旧的 JavaScript 版本
ES6——JavaScript 新版本
caniuse.com——可以查看浏览器兼容情况的网站
Babel——能将 ES6+ 版本的代码转译为 ES5
npm init——创建 package.json 文件
package.json——包含 JavaScript 项目信息的文件
npm install——安装项目依赖的 Node 包
babel-cli——包含Babel 命令行工具的 Node 包
babel-preset-env——包含 ES6+ 到 ES5 的语法映射信息的 Node 包
.babelrc——指定 JavaScript 源代码的版本