예를 들면 다음과 같은 js (UMD script)가 있다고 합니다.

umd.js

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global.foo = factory());
}(this, (function () {
  'use strict';

  class foo {}

  return foo;
})));

이것을 babel es2015 preset으로 변환하면 다음과 같습니다.

transpiled.js

'use strict';

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

(function (global, factory) {
  (typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : global.foo = factory();
})(undefined, function () {
  'use strict';

  var foo = function foo() {
    _classCallCheck(this, foo);
  };

  return foo;
});

여기서 문제는 global 매개 변수에 걸친 this 부분입니다. 이 this는 스크립트의 최상위 this이므로 babel을 변환하면 undefined로 바뀝니다 (ES module의 최상위 this는 undefined가 된다는 사양이 있기 때문입니다.)

UMD는이 최상위 수준의 this에 의존하여 전역 변수로 모듈을 내보내므로이 변환이 걸리면 UMD로 작동하지 않습니다.

대응책

이 문제를 해결하려면 다음과 같이 es2015 사전 설정에 아래와 같이 옵션을 전달하여 현상을 피할 수 있습니다.

.babelrc

{
  "presets": [
    [   
      "es2015",
      {   
        "modules": false
      }   
    ]   
  ]
}

위와 같이 { modules: false } 옵션을 주는 것으로, UMD 스크립트가 ES module 로서 해석되는 것을 막을 수가 있어 트랜스파일의 결과는 아래와 같이 됩니다.

transpiled.js

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

(function (global, factory) {
  (typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : global.foo = factory();
})(this, function () {
  'use strict';

  var foo = function foo() {
    _classCallCheck(this, foo);
  };

  return foo;
});

따라서 this가 지워지지 않도록 UMD로 기능을 유지할 수 있습니다.

참고:
- htps : // 기주 b. 코 m / 바베 l / 바베 l / 이스에 s / 5082