为什么在使用babel-loader时Object.assign()需要polyfill?

我试图Object.assign()在由Babel编译的ES6 Web应用程序中使用webpack,但出现错误:

Uncaught TypeError: Object.assign is not a function

我已经在使用babel-loaderES6到ES5了,所以我所有其他的ES6代码都可以使用。但是,Object.assign()只有import "babel-core/polyfill"在代码库中也可以使用。我看到我也可以通过导入babel-runtime来解决此问题,但是我想理解为什么 Object.assign()需求比babel-loader执行的要多-不应babel-loader预处理所有内容,包括Object.assign()吗?

DavaidTony宝儿2020/03/23 20:59:41

我遇到了同样的问题。我认为在得到babel支持的情况下,可以安全使用所有ES2015 +功能。但是如上所述,babel polyfill仅填充语法,而不包含函数(Object.assign,Array.includes仅举几例)。对于Object.assign,我更喜欢不使用polyfill,而是使用散布运算符。在这种情况下,如果未找到babel,则实际上会填充Object.assign。看一下这段代码:

let obj = {a: 1};
let obj2 = {...obj};
let obj3 = Object.assign({}, obj);

It will be tranpiled by babel to:

"use strict";

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var obj = { a: 1 };
var obj2 = _extends({}, obj);
var obj3 = Object.assign({}, obj);

For spread operator babel tries to used native Object.assign method and use polyfill if it was not found. But the explicit Object.assign method is left unchanged ¯\_(ツ)_/¯

猴子村村2020/03/23 20:59:41

Object.assign()是ES6规范的一部分的新API,因此尚未在大多数浏览器中实现。请参阅:https//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

因此,当您导入时babel-core/polyfill,它会为此添加polyfill和其他新API,以便您的ES6代码可以使用它们。

babel-loader 只是将ES6语法转换为ES5兼容代码的编译器。

GO2020/03/23 20:59:41

Babel通过via babel-loader转换ES6 语法中的差异Babel本身绝对不会在ES6标准库功能(如Object.assign)中添加任何内容加载polyfill core-js将为您加载一个单独的polyfill ,但是您可以加载所需的任何polyfill。

甚至某些语法转换都依赖于特定的polyfill功能进行加载,因为某些语法依赖于库代码中实现的算法和行为。http://babeljs.io/docs/learn-es2015/上的ES6功能列出了假定已加载的标准库功能。