当使用babel-loader时,为什么Object.assign()需要一个polyfill ?
Why does Object.assign() require a polyfill when babel-loader is being used?
我试图在Babel与webpack编译的ES6 web应用程序中使用Object.assign()
,但我得到一个错误:
Uncaught TypeError: Object.assign is not a function
我已经使用babel-loader
将ES6转换为ES5,因此所有其他ES6代码都可以工作。然而,Object.assign()
只有在我的代码库中也有import "babel-core/polyfill"
之后才能工作。我看到我也可以通过导入babel-runtime来修复这个问题,但是我想了解为什么 Object.assign()
需要比babel-loader
执行的更多- babel-loader
不应该预处理所有内容,包括Object.assign()
吗?
Babel通过babel-loader
编译ES6 语法中的差异。Babel本身绝对不会在ES6标准库中添加任何功能(如Object.assign
)。加载polyfill会为你加载一个单独的polyfill core-js
,但是你可以加载任何你想要的polyfill。
甚至一些语法转换依赖于特定的填充功能来加载,因为一些语法依赖于库代码中实现的算法和行为。在http://babeljs.io/docs/learn-es2015/上的ES6特性列出了假定已加载的标准库功能。
Object.assign()
是一个新的API,是ES6规范的一部分,所以它还没有在大多数浏览器中实现。参见:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
所以当你导入babel-core/polyfill
时,它会添加polyfill和其他新的api,以便你的ES6代码可以使用它们。
babel-loader
只是将ES6语法转换为ES5兼容代码的转译器。
如果你去兼容性,你可以看到IE 11是不支持在Web和移动object.assign。它还为你提供了polyfill。
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assignif (typeof Object.assign != 'function') {
Object.assign = function(target, varArgs) {
'use strict';
if (target == null) { // TypeError if undefined or null
throw new TypeError('Cannot convert undefined or null to object');
}
var to = Object(target);
for (var index = 1; index < arguments.length; index++) {
var nextSource = arguments[index];
if (nextSource != null) { // Skip over if undefined or null
for (var nextKey in nextSource) {
// Avoid bugs when hasOwnProperty is shadowed
if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
to[nextKey] = nextSource[nextKey];
}
}
}
}
return to;
};
}
如果使用Babel
https://babeljs.io/docs/plugins/transform-object-assign/如果使用NPM
https://www.npmjs.com/package/object-assign我也面临同样的问题。我以为在babel的支持下,我可以安全地使用ES2015+的所有功能。但是正如上面提到的,babel只填充语法,而不是函数(Object。分配,数组。仅举几个例子)。为对象。我不喜欢使用填充,而是使用扩展操作符。在这种情况下,babel实际上是polyfills Object。如果没有找到,请分配。看一下这段代码:
let obj = {a: 1};
let obj2 = {...obj};
let obj3 = Object.assign({}, obj);
它将被babel翻译为:
"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);
对于扩展操作符,babel尝试使用本机对象。分配方法并使用填充,如果没有找到。而是显式对象。Assign方法保持不变¯'_()_/¯
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- jQuery:循环一个具有不同超时值的循环
- 当包含另一个asp文件时,是否也包含所有引用的样式和脚本页面
- 从javascript创建一个列表
- 节点导出返回一个空对象
- 使用clickToggle并在单击另一个元素时关闭元素
- 我可以在json对象中添加一个函数吗
- 使用javascript将动态表从一个html页面打印到另一个html页
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- 表追加而不附加最后一个元素
- 我如何找到一个句子中的所有空格并替换忽略它们
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 如何在android中使用phonegap将文件从一个文件夹移动/复制到另一个文件夹
- 使用类从一个标记中双击事件
- Javascript,访问一个主要对象模块模式中的每个对象
- 如果使用 lodash 将属性存在于另一个对象中,则向对象添加属性
- 如何在elfinder插件(一个文件管理器插件)上获得上传前事件
- 我应该如何从xml文件构建一个javascript页面
- 是否有一个(polyfill)代码重置所有继承的CSS属性上的给定元素
- 当使用babel-loader时,为什么Object.assign()需要一个polyfill ?