ES6 浏览器兼容性 和 Transpilation

 浏览器兼容性 和 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 源代码的版本