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的工作情况.

command

npm init

我们现在将安装babel所需的软件包.

babel 6的套餐

npm install babel-cli babel-core babel-preset-es2015 --save-dev

babel 7的套餐

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.

ES6  - Promises

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

BabelJS  -  ES5

"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文件中，如下所示 :

index. html

               
Babel Polyfill Testing
               

输出

在index.html文件中，我们使用了 node_modules 中的polyfill.min.js文件，后跟promise_es5.js :

注意 :  Polyfill文件必须在主javascript调用之前的开始使用.

String Padding

字符串填充从左侧添加另一个字符串按照指定的长度.字符串填充的语法如下所示 :

语法

str.padStart(length, string);str.padEnd(length, string);

示例

const str = 'abc';console.log(str.padStart(8, '_'));console.log(str.padEnd(8, '_'));

输出

_____abcabc_____

Babel  -  ES5

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一起使用，如下所示 :

test.html

Map，Set，WeakSet，WeakMap

在本节中，我们将了解 Map，Set，WeakSet，WeakMap.

• 地图是一个带键/值对的对象.

• 集合也是一个对象，但具有唯一值.

• WeakMap和WeakSet 也是具有键/值对的对象.

Map，Set，WeakMap和WeakSet是添加到的新功能ES6.为了将其转换为在旧版浏览器中使用，我们需要使用polyfill.我们将使用polyfill来编译代码.

示例

let m = new Map(); //map examplem.set("0","A");m.set("1","B");console.log(m);let set = new Set(); //set exampleset.add('A');set.add('B');set.add('A');set.add('B');console.log(set);let ws = new WeakSet(); //weakset examplelet x = {};let y = {};ws.add(x);console.log(ws.has(x));console.log(ws.has(y));let wm = new WeakMap(); //weakmap examplelet a = {};wm.set(a, "hello");console.log(wm.get(a));

输出

Map(2) {"0" => "A", "1" => "B"}Set(2) {"A", "B"}truefalsehello

命令

npx babel set.js --out-file set_es5.js

Babel-ES5

"use strict";var m = new Map(); //map examplem.set("0", "A");m.set("1", "B");console.log(m);var set = new Set(); //set exampleset.add('A');set.add('B');set.add('A');set.add('B');console.log(set);var ws = new WeakSet(); //weakset examplevar x = {};var y = {};ws.add(x);console.log(ws.has(x));console.log(ws.has(y));var wm = new WeakMap(); //weakmap examplevar a = {};wm.set(a, "hello");console.log(wm.get(a));

js必须与babel-polyfill一起使用，如下所示 :

test.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

Babel-es5

"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文件，如下所示 :

index.html

            
Babel Polyfill Testing
               

输出