[英]Why Mozilla put Object.assign polyfill in an anonymous function?
[英]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。
甚至一些語法轉換依賴於特定的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兼容代碼的轉換babel-loader
。
如果您轉到兼容性,您可以看到對於object.assign,Web和Mobile都不支持IE 11 。 它還為您提供了pollyfill。
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
if (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;
};
}
如果使用巴別塔
https://babeljs.io/docs/plugins/transform-object-assign/
如果使用NPM
我遇到了同樣的問題。 我認為在巴貝爾的支持下,我可以安全地使用所有ES2015 +特色。 但正如上面提到的,babel polyfills只有語法,而不是函數(Object.assign,Array.includes僅舉幾例)。 對於Object.assign,我不想使用polyfill,而是使用spread運算符。 在這種情況下,如果找不到,babel實際上會填充Object.assign。 看看這段代碼:
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嘗試使用本機Object.assign方法,並在未找到時使用polyfill。 但顯式的Object.assign方法保持不變¯\\ _(ツ)_ /¯
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.