babel-loader를 사용할 때 Object.assign ()에 polyfill이 필요한 이유는 무엇입니까?

babel-loader를 사용할 때 Object.assign ()에 polyfill이 필요한 이유는 무엇입니까?

---

Object.assign()Babel에서 webpack으로 컴파일 한 ES6 웹 앱에서 사용하려고하는데 오류가 발생합니다.

Uncaught TypeError: Object.assign is not a function

이미 babel-loaderES6를 ES5로 변환 하는 데 사용 하고 있으므로 다른 모든 ES6 코드가 작동합니다. 그러나 내 코드베이스 Object.assign()에서도 작동합니다 import "babel-core/polyfill". babel-runtime을 가져 와서이 문제를 해결할 수도 있지만, 수행하는 것보다 더 많은 것이 필요한 이유 를 이해하고 싶습니다. ?를 포함한 모든 것을 사전 처리 해서는 안됩니다 .Object.assign()babel-loaderbabel-loaderObject.assign()

---

Babel은을 통해 babel-loaderES6 구문의 차이를 변환 합니다 . Babel 자체는 ES6 표준 라이브러리 기능 (예 :)에 추가 할 작업이 전혀 없습니다 Object.assign. polyfill을로드하면 별도의 polyfill이로드 core-js되지만 원하는 모든 polyfill을로드 할 수 있습니다.

일부 구문은 라이브러리 코드에 구현 된 알고리즘 및 동작에 의존하기 때문에 일부 구문 변환도 특정 폴리 필 기능에 의존하여로드됩니다. http://babeljs.io/docs/learn-es2015/ 의 ES6 기능은 각각로드 된 것으로 간주되는 표준 라이브러리 기능을 나열합니다.

---

Object.assign()ES6 사양의 일부인 새로운 API이므로 아직 대부분의 브라우저에서 구현되지 않았습니다. 참조 : https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

따라서를 가져 babel-core/polyfill오면이 API와 다른 새 API에 폴리 필을 추가하여 ES6 코드에서 사용할 수 있습니다.

babel-loader ES6 구문을 ES5 호환 코드로 변환하는 트랜스 파일러입니다.

---

호환성으로 이동하면 IE 11 이 object.assign에 대해 웹과 모바일 모두에서 지원되지 않음을 알 수 있습니다 . 그것은 또한 당신에게 그것에 대한 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;
  };
 }

Babel을 사용하는 경우

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

NPM을 사용하는 경우

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

---

나는 같은 문제에 직면했다. 바벨이 뒷받침 할 때 모든 ES2015 + 기능을 사용해도 안전하다고 생각했습니다. 그러나 위에서 언급했듯이 babel 폴리 필은 함수가 아닌 구문 만 작성합니다 (Object.assign, Array.includes는 몇 가지 이름 만 포함). Object.assign의 경우 polyfill을 사용하지 않고 스프레드 연산자를 사용합니다. 이 경우 babel은 실제로 발견되지 않으면 Object.assign을 폴리 필합니다. 이 코드를 살펴보십시오.

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

바벨은 다음을 수행합니다.

"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 메소드는 변경되지 않은 채로 남아 있습니다 ¯ \ _ (ツ) _ / ¯

참고 URL : https://stackoverflow.com/questions/32148218/why-does-object-assign-require-a-polyfill-when-babel-loader-is-being-used