Babel Polyfill为Web浏览器添加了对功能的支持，这些功能不可用. Babel将最近的ecma版本的代码编译成我们想要的代码.它根据预设更改语法，但不能对所使用的对象或方法执行任何操作.为了向后兼容，我们必须使用polyfill来实现这些功能.
以下是需要polyfill支持的功能列表用于旧浏览器 :
Promises
Map
Set
Symbol
Weakmap
Weakset
Array.from，Array.includes，Array.of，Array＃find，Array.buffer，Array＃findIndex
Object.assign，Object.entries，Object.values
我们将创建项目设置并查看babel polyfill的工作情况.
npm init
我们现在将安装babel所需的软件包.
npm install babel-cli babel-core babel-preset-es2015 --save-dev
npm install @babel/cli @babel/core @babel/preset-env --save-dev
这是最后的package.json :
我们还将添加es2015到预设，因为我们想把代码编译成es5.
.babelrc for babel 6
.babelrc for babel 7
{
"presets":["@babel/env"]
}我们将安装一个lite-serve，以便我们可以在浏览器中测试我们的代码 :
npm install --save-dev lite-server
让我们添加babel命令来编译package.json中的代码 :
我们还添加了调用lite-s的build命令erver.
Babel-polyfill与babel-core软件包一起安装. babel-polyfill将在节点模块中提供，如下所示 :
我们将继续致力于承诺并使用babel-polyfill.
let timingpromise = new Promise((resolve, reject) => {
setTimeout(function() {
resolve("Promise is resolved!");
}, 1000);
});
timingpromise.then((msg) => {
console.log("%c"+msg, "font-size:25px;color:red;");
});npx babel promise.js --out-file promise_es5.js
"use strict";
var timingpromise = new Promise(function (resolve, reject) {
setTimeout(function () {
resolve("Promise is resolved!");
}, 1000);
});
timingpromise.then(function (msg) {
console.log("%c"+msg, "font-size:25px;color:red;");
});编译不需要改变任何东西.承诺的代码已被翻译成原样.但是，即使我们已经将代码编译为es5，不支持promises的浏览器也会抛出错误.
要解决这个问题，我们需要添加polyfill以及最终的es5编译代码.要在浏览器中运行代码，我们将从节点模块中获取babel-polyfill文件并将其添加到我们要使用promises的.html文件中，如下所示 :
<html> <head> </head> <body> <h1>Babel Polyfill Testing</h1> <script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script> <script type="text/javascript" src="promise_es5.js"></script> </body> </html>
在index.html文件中，我们使用了 node_modules 中的polyfill.min.js文件，后跟promise_es5.js :
<script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script> <script type="text/javascript" src="promise_es5.js"></script>
注意 : Polyfill文件必须在主javascript调用之前的开始使用.
字符串填充从左侧添加另一个字符串按照指定的长度.字符串填充的语法如下所示 :
str.padStart(length, string); str.padEnd(length, string);
const str = 'abc'; console.log(str.padStart(8, '_')); console.log(str.padEnd(8, '_'));
_____abc abc_____
npx babel strpad.js --out-file strpad_es5.js
'use strict'; var str = 'abc'; console.log(str.padStart(8, '_')); console.log(str.padEnd(8, '_'));
js必须与babel-polyfill一起使用，如下所示 :
<!DOCTYPE html> <html> <head> <title>BabelJs Testing </title> </head> <body> <script src="node_modules/babel-polyfill/dist/polyfill.min.js" type="text/javascript"></script> <script type="text/javascript" src="strpad_es5.js"></script> </body> </html>
在本节中，我们将了解 Map，Set，WeakSet，WeakMap.
地图是一个带键/值对的对象.
集合也是一个对象，但具有唯一值.
WeakMap和WeakSet 也是具有键/值对的对象.
Map，Set，WeakMap和WeakSet是添加到的新功能ES6.为了将其转换为在旧版浏览器中使用，我们需要使用polyfill.我们将使用polyfill来编译代码.
let m = new Map(); //map example
m.set("0","A");
m.set("1","B");
console.log(m);
let set = new Set(); //set example
set.add('A');
set.add('B');
set.add('A');
set.add('B');
console.log(set);
let ws = new WeakSet(); //weakset example
let x = {};
let y = {};
ws.add(x);
console.log(ws.has(x));
console.log(ws.has(y));
let wm = new WeakMap(); //weakmap example
let a = {};
wm.set(a, "hello");
console.log(wm.get(a));Map(2) {"0" => "A", "1" => "B"}
Set(2) {"A", "B"}
true
false
hellonpx babel set.js --out-file set_es5.js
"use strict";
var m = new Map(); //map example
m.set("0", "A");
m.set("1", "B");
console.log(m);
var set = new Set(); //set example
set.add('A');
set.add('B');
set.add('A');
set.add('B');
console.log(set);
var ws = new WeakSet(); //weakset example
var x = {};
var y = {};
ws.add(x);
console.log(ws.has(x));
console.log(ws.has(y));
var wm = new WeakMap(); //weakmap example
var a = {};
wm.set(a, "hello");
console.log(wm.get(a));js必须与babel-polyfill一起使用，如下所示 :
<!DOCTYPE html> <html> <head> <title>BabelJs Testing</title> </head> <body> <script src="node_modules/babel-polyfill/dist/polyfill.min.js" type="text/javascript"></script> <script type="text/javascript" src="set_es5.js"></script> </body> </html>
可以在数组上使用许多属性和方法;例如，array.from，array.includes等.
让我们考虑使用以下示例来更好地理解这一点.
arraymethods.js
var arrNum = [1, 2, 3]; console.log(arrNum.includes(2)); console.log(Array.from([3, 4, 5], x => x + x));
输出
true [6, 8, 10]
npx babel arraymethods.js --out-file arraymethods_es5.js
"use strict";
var arrNum = [1, 2, 3];
console.log(arrNum.includes(2));
console.log(Array.from([3, 4, 5], function (x) {
return x + x;
}));阵列上使用的方法按原样打印.为了使它们适用于旧浏览器，我们需要在开始时添加polyfill文件，如下所示 :
<html> <head></head> <body> <h1>Babel Polyfill Testing</h1> <script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script> <script type="text/javascript" src="arraymethods_es5.js"></script> </body> </html>
