Warum benötigt Object.assign() einen Polyfill, wenn babel-loader verwendet wird?

Question

Ich versuche Object.assign() in einer ES6 Web-App von Babel mit webpack kompiliert zu verwenden, aber ich erhalte eine Fehlermeldung:

Uncaught TypeError: Object.assign is not a function 

Ich bin schon babel-loader mit ES6 bis ES5 transpile, so dass alle meine anderer ES6-Code funktioniert. Aber Object.assign() funktioniert nur, nachdem ich auch import "babel-core/polyfill" in meiner Codebasis. Ich sehe, dass ich auch das beheben kann by importing babel-runtime, aber ich würde gerne verstehen warumObject.assign() erfordert mehr als was babel-loader führt - sollte nicht babel-loader alles vorverarbeiten, einschließlich Object.assign()?

Answer 1

Babel, über babel-loader, transpiliert Unterschiede in ES6 Syntax. Babel alleine fügt absolut nichts in ES6-Standardbibliotheksfunktionalität hinzu (wie Object.assign). Das Laden des Polyfill lädt ein separates Polyfill core-js für Sie, aber Sie können jedes beliebige Polyfill laden.

Sogar einige Syntaxumwandlungen beruhen darauf, dass bestimmte Polyfill-Funktionen geladen werden, da einige Syntax auf Algorithmen und Verhalten beruht, die im Bibliothekscode implementiert sind. Die ES6-Funktionen unter http://babeljs.io/docs/learn-es2015/ zeigen jeweils auf, welche Standardbibliotheksfunktionen als geladen gelten.

Answer 2

Object.assign() ist eine neue API, die Teil der ES6-Spezifikation ist, daher ist sie in den meisten Browsern noch nicht implementiert. Siehe: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Wenn Sie also babel-core/polyfill importieren, fügt es diesem und anderen neuen APIs Polyfills hinzu, sodass Ihr ES6-Code sie verwenden kann.

babel-loader ist nur der Transpiler, der die ES6-Syntax in ES5-kompatiblen Code konvertiert.

Answer 3

Wenn Sie auf Kompatibilität gehen, können Sie sehen, IE 11 wird nicht unterstützt in Web und Mobile für object.assign. Es gibt Ihnen auch die Pollyfill dafür.

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; 
    }; 
} 

Wenn Babel mit

https://babeljs.io/docs/plugins/transform-object-assign/

Wenn NPM mit

https://www.npmjs.com/package/object-assign