javascript - 使用没有导出的 UMD 来简单地增加依赖性是否合理？

Question

我正在创建我的第一个用于开源分发的 AngularJS 模块。我想以其他人易于使用的方式打包它。

UMD 项目提供了一个 pattern用于导出与 AMD、CommonJS(或至少 Node)和浏览器全局兼容的 JavaScript 模块:

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(['b'], factory); // AMD
  } else if (typeof exports === 'object') {
    module.exports = factory(require('b')); // Node
  } else {
    root.returnExports = factory(root.b); // browser global (root is window)
  }
}(this, function (b) {
  // use b in some fashion
  return {}; // return a value to define the module export
}));

但是，由于 AngularJS 有自己的内部模块系统，注册模块只需调用 angular 对象上的方法即可完成，即 angular.module()。因此，UMD 模块不需要导出任何东西；它只需要要求并作用于 angular。就前面的例子而言，我认为它看起来像这样:

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    factory(require(['b'])); // AMD
  } else if (typeof exports === 'object') {
    factory(require('b')); // Node
  } else {
    factory(root.b); // browser global (root is window)
  }
}(this, function (b) {
  // use b in some fashion
}));

或者，具体到我的情况:

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    factory(require(['angular'])); // AMD
  } else if (typeof exports === 'object') {
    factory(require('angular')); // Node
  } else {
    factory(root.angular); // browser global (root is window)
  }
}(this, function (angular) {
  angular.module( ... );
}));

这没什么大不了的，还是违背了UMD的精神？我问是因为我找不到任何不导出任何内容的 UMD 模式。

Answer 1

我认为使用这种模式没有任何问题。正如您可能已经发现的那样，Angular 与现有模块系统的配合不是很好，因为它使用自己的模块系统，但是模块不必导出任何东西。项目的主模块多久导出一次？通常它只是获取依赖项。

如果您正在寻找一个执行类似操作的示例，您可以查看 jQuery 鼠标滚轮插件，它使用 UMD 但依赖于 jQuery。

Excerpt from jquery.mousewheel.js:

(function (factory) {
    if ( typeof define === 'function' && define.amd ) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node/CommonJS style for Browserify
        module.exports = factory;
    } else {
        // Browser globals
        factory(jQuery);
    }
}(function ($) {

一个区别是它为 Node/CommonJS 导出返回一个构造函数，这样您就可以传入要扩展的 jQuery 对象。

---

附带说明一下，在 AMD 部分，您的 UMD 实现存在一个问题。

你有:

factory(require(['b'])); // AMD

你需要的地方:

define(['b'], factory); // AMD

由于 AMD 是异步的，您将无法同步要求 Angular 模块。

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(['b'], factory); // AMD
  } else if (typeof exports === 'object') {
    factory(require('b')); // Node
  } else {
    factory(root.b); // browser global (root is window)
  }
}(this, function (b) {
  // use b in some fashion
}));