如何使用 Babel 将 jQuery 的 ECMA6 导入转换为 UMD 包装器？

Question

我正在尝试使用 Babel 将 jQuery 的 ECMA6 导入转换为 UMD 包装器。

我的 ECMA6 源如下所示：

import {jQuery as $} from jquery;

<payload>

Babel 将其转换为：

(function (global, factory) {
  if (typeof define === "function" && define.amd) {
    define(['jquery'], factory);
  } else if (typeof exports !== "undefined") {
    factory(require('jquery'));
  } else {
    var mod = {
      exports: {}
    };
    factory(global.jquery);
    global.metisMenu = mod.exports;
  }
})(this, function (_jquery) {
  'use strict';

  var _jquery2 = _interopRequireDefault(_jquery);

  function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {
      default: obj
    };
  }

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

  <payload>(_jquery.jQuery);

  })

此代码在 Node.js 环境中工作正常，因为 require('jquery') 从 node_modules 获取 jquery。

但是，在浏览器环境中 global.jquery（相当于 window.jquery）未定义 - jquery 将自身导入为 $ 或 jQuery，但不像 jquery.

是否有任何 Babel 设置可以解决这个问题？

我现在的.babelrc

{
    "presets": [
        ["env", {
            "modules": "umd",
            "loose": true
        }]
    ]
}

Answer 1

您应该使用 transform-es2015-modules-umd 插件中的 globals 选项：

{
  "plugins": [
    ["transform-es2015-modules-umd", {
      "globals": {
        "jquery": "jQuery"
      }
    }]
  ]
}

参见docs。

如何使用 Babel 将 jQuery 的 ECMA6 导入转换为 UMD 包装器？

How to transpile ECMA6 import of jQuery to a UMD wrapper with Babel?

javascript

jquery

ecmascript-6

umd

babeljs