HTML 与 ECMAScript 的发展
HTML 发展历史
| 版本 | 时间 | 组织 |
|---|---|---|
| HTML 1 | 1991 | IETF |
| HTML 2 | 1995 | IETF |
| HTML 3 | 1997 | IETF |
| HTML 3.2 | 1997.1~至今 | WWW |
ECMAScript 版本历程
| 版本 | 时间 | 组织 |
|---|---|---|
| ECMA-262 | - | ECMA |
| LiveScript | 1995 | 网景 |
| JavaScript | 1996 | 网景 |
| JScript | 1996 | 微软 |
| ECMAScript 1.0 | 1997.6 | ECMA |
| ECMAScript 2.0 | 1998.6 | ECMA |
| ECMAScript 3.0 | 1999.12 | ECMA |
| ECMAScript 4.0 | 废弃 | ECMA |
| ECMAScript 5.0 | 2009.12 | ECMA |
| ECMAScript 5.1 | 2011.6 | ECMA |
| ECMAScript 2015 (ES6) | 2015.6 | ECMA |
| ECMAScript 2016 (ES7) | 2016.6 | ECMA |
| ECMAScript 2017 (ES8) | 2017.6 | ECMA |
| ECMAScript 2018 (ES9) | 2018.6 | ECMA |
| ECMAScript 2019 (ES10) | 2019.6 | ECMA |
| ECMAScript 2020 (ES11) | 2020.6 | ECMA |
| ECMAScript 2021 (ES12) | 2021.6 | ECMA |
| ECMAScript 2022 (ES13) | 2022.6 | ECMA |
| ECMAScript 2023 (ES14) | 2023.6 | ECMA |
浏览器兼容性
ES6 并非所有浏览器都支持，因此在使用 ES6 时，需要通过编译过程将代码转换为 ES5 以提高网页的兼容性。此外，使用 polyfill 可以为缺失的 ES6 API 提供支持，从而确保代码在较旧的浏览器中正常运行。
Babel 转译工具
Babel 是最常用的 JavaScript 编译器，能够将 ES6 及更高版本的代码转换为向后兼容的 JavaScript 版本。
官方文档：What is Babel?
在线试用：Babel REPL
安装与配置
通过 npm 安装 Babel：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
创建 Babel 配置文件 .babelrc：
{
"presets": ["@babel/preset-env"],
"plugins": []
}
使用示例
配置完成后，可以通过命令行将 ES6 代码编译为 ES5 代码：
npx babel src --out-dir lib
在 HTML 中使用 Babel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Babel Demo</title>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<script type="text/babel">
const sum = (a, b) => a + b;
console.log(sum(1, 2));
</script>
</body>
</html>
Node.js 对 ES6 特性的支持
可以通过 node.green 查看不同 Node.js 版本对 ES6+ 特性的支持情况。Node.js 已全面支持 ES6 的大部分特性，包括箭头函数、模板字符串、解构赋值、类和模块等。对于某些实验性特性，可以使用 --harmony 标志启用。