1

我正在尝试使用 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.

但是，在浏览器环境中global.jquery（相当于window.jquery）没有定义 - jquery 将自身导入为$or jQuery，而不是作为jquery.

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

我现在的.babelrc

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

1 回答 1

2

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

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

请参阅文档。

于 2018-02-16T10:18:41.213 回答