ECMAScript6-----基本准备
ECMAScript6-----基本准备
- 1.资料
- 2.ECMAScript 和 JavaScript 的关系
- 3.ES6 与 ECMAScript 2015 的关系
- 4.Babel转码器
- 5.关于垫片polyfill
- 5.1 什么是垫片
- 5.2 关键点
- 5.3 案例
1.资料
想了解更多ECMAScript6的知识,可以专门看阮一峰的博客https://es6.ruanyifeng.com/#docs/intro。
2.ECMAScript 和 JavaScript 的关系
一句话概括:ECMAScript是JavaScript的规格,JavaScript是ECMAScript的一种实现。
3.ES6 与 ECMAScript 2015 的关系
ES6既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017等等，而 ES2015 则是正式名称，特指该年发布的正式版本的语言标准。我们说的ES6，一般是指 ES2015 标准，但有时也是泛指“下一代 JavaScript 语言”。
4.Babel转码器
Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。下面是一个例子。
// 转码前
input.map(item => item + 1);
// 转码后
input.map(function (item) {
return item + 1;
});
上面的原始代码用了箭头函数，Babel 将其转为普通函数，就能在不支持箭头函数的 JavaScript 环境执行了。
下面我将通过Babel转码器从0到1来实现转码功能：
(1) 新建文件夹,在文件夹中新建文件夹，在src文件夹中新建两个文件test1.js,test2.js，两文件内容如下:
//test1.js文件
let arr =[1,2,3,4,5];
let newArr= arr.map(item => item + 1);
//test2.js
let newArr=[1,2,3]
(2) 安装Babel核心代码
npm install --save-dev @babel/core
(3) 配置.babelrc文件
先安装官方提供的规则集：
# 最新转码规则
npm install --save-dev @babel/preset-env
# react 转码规则
npm install --save-dev @babel/preset-react
然后,将这些规则加入.babelrc文件中。
//.babelrc
{
"presets": [
"@babel/env",
"@babel/preset-react"
],
"plugins": []
}
(4) 命令行转码
Babel 提供命令行工具@babel/cli，用于命令行转码。它的安装命令如下：
npm install --save-dev @babel/cli
基本用法可以自己查。在控制台输入:
//npx会去node_module文件夹中去找babel插件
//dist/output是转码生成的文件的所在位置
npx babel src --out-file dist/output.js
这样子在项目中生成一个文件output.js(在dist文件夹下)，存的是src下两个文件的代码转码,如下:
//dist/output.js
"use strict";
var arr = [1, 2, 3, 4, 5];
var newArr = arr.map(function (item) {
return item + 1;
});
"use strict";
var newArr = [1, 2, 3];
可以看到let被转为了var,map中的回调参数从箭头函数变为了function匿名函数；但需要注意：两个文件中的变量一样(都是newArr),这个并没有被解决。
在根目录新建一个test.html,将打包文件output.js引入：
//test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="./dist/output.js"></script>
<script>
const myArr=newArr;
console.log(myArr)//1,2,3
</script>
</body>
</html>
最终输出的结果是[1,2,3],说明test1.js的内容被覆盖；
注意:Babel默认只转换新的JavaScript句法(syntax),而不转换新的API，比如Iterator、Generator、Set、Map、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。
(5) 命令行转码
在src文件夹下新建文件测试垫片.js,写上测试代码：
const s = new Set();
(6) 在命令行输入命令
npx babel src/测试垫片.js --out-file dist/测试垫片.js
(7) 生成文件(在dist中生成文件内容）
会发现Set没有被转码。dist/测试垫片.js文件中生成的内容如下:
"use strict";
var s = new Set();
这印证了刚刚的结论-----Babel默认只转换新的JavaScript句法(syntax),而不转换新的API。
(8) 使用垫片polyfill处理上述问题
先安装core-js和regenerator-runtime(后者提供generator函数的转码)，为当前环境提供一个垫片。
npm install --save-dev core-js regenerator-runtime
在测试垫片.js中新加两行代码:
import 'core-js';
import 'regenerator-runtime/runtime';
const s = new Set();
再次使用命令行输入命令：
npx babel src/测试垫片.js --out-file dist/测试垫片.js
会生成文件(在dist中生成文件内容),dist/测试垫片.js文件中生成的新内容如下:
"use strict";
require("core-js");
require("regenerator-runtime/runtime");
var s = new Set();
这时候打包后的代码，在低版本浏览器是可以生效的。
5.关于垫片polyfill
5.1 什么是垫片
垫片(polyfill)是指在旧环境或不支持某些现代特性的平台上,实现这些现代特性的一段代码。它的作用是为那些尚未实现新特性或标准的浏览器或运行环境提供功能支持，确保代码在各种环境中都有一致的行为。
5.2 关键点
- 功能补充：
垫片用于补充浏览器或环境中缺失的功能。例如，某些旧版浏览器不支持Promise对象，可以通过引入Promise的垫片来实现这一功能。 - 向后兼容:使用垫片可以让开发者使用最新的语言特性,而不必担心这些特性在旧环境中无法运行，从而提高代码的向后兼容性。
- 库和工具支持:许多
JavaScript库和工具(如Babel)都支持垫片，自动引入所需的垫片以确保代码的兼容性。
5.3 案例
假设某个旧浏览器不支持Array.prototype.includes方法，可以使用以下垫片代码：
if (!Array.prototype.includes) {
Array.prototype.includes = function(searchElement, fromIndex) {
if (this == null) {
throw new TypeError('"this" is null or not defined');
}
var o = Object(this);
var len = o.length >>> 0;
if (len === 0) {
return false;
}
var n = fromIndex | 0;
var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
while (k < len) {
if (o[k] === searchElement) {
return true;
}
k++;
}
return false;
};
}
这段代码会检查Array.prototype.includes是否存在，如果不存在，就定义一个兼容的方法。这样，即使在不支持includes方法的旧浏览器中，这个方法也可以正常使用。