36

有没有办法创建一个支持以下所有模块格式的javascript微库（一个没有依赖关系的库）：

  • 异步模块定义
  • CommonJS
  • 将库的导出公开为全局命名空间对象（无加载器）
4

6 回答 6

51

是的，我把这个答案归功于ded和他很棒的模块：

(function(name, definition) {
    if (typeof module != 'undefined') module.exports = definition();
    else if (typeof define == 'function' && typeof define.amd == 'object') define(definition);
    else this[name] = definition();
}('mod', function() {
    //This is the code you would normally have inside define() or add to module.exports
    return {
        sayHi: function(name) {
            console.log('Hi ' + name + '!');
        }
    };
}));

然后可以使用它：

  1. 在 AMD 中（例如使用 requireJS）：

    requirejs(['mod'], function(mod) {
    mod.sayHi('Marc');
});

  2. 在 commonJS（例如 nodeJS）：

    var mod = require('./mod');
mod.sayHi('Marc');

  3. 全局（例如在 HTML 中）：

    <script src="mod.js"></script>
<script>mod.sayHi('Marc');</script>

这种方法需要得到更多的宣传——如果 jQuery 和 co. 开始使用它的生活会容易得多！

于 2012-12-25T20:02:26.710 回答
22

这是各种交叉兼容模块格式的列表。

我怀疑你要找的是他们所谓的“ commonjsStrict.js ”

于 2012-12-02T21:31:39.510 回答
7

uRequire，通用模块和资源转换器正是这样做的工具。

  • 它主要将 AMD 和 CommonJS 转换为UMD / AMD / CommonJS / 纯脚本（不需要 AMD 加载器）。

  • 它允许声明式导出模块，并带有noConflict()烘焙功能。

  • 它可以在构建模块时操作模块（注入/替换/删除依赖项或代码）。

  • 它可以从 coffeescript、coco、Livescript、icedCoffeescript 转换，您可以在一个衬里中添加自己的转换！

于 2013-10-02T10:12:51.110 回答
1

只是为了更新一点关于@marc的答案，我也对 ded 表示感谢，并对其进行了一些更新以适应最新的更新：

(function (name, definition, context, dependencies) {
  if (typeof context['module'] !== 'undefined' && context['module']['exports']) { if (dependencies && context['require']) { for (var i = 0; i < dependencies.length; i++) context[dependencies[i]] = context['require'](dependencies[i]); } context['module']['exports'] = definition.apply(context); }
  else if (typeof context['define'] !== 'undefined' && context['define'] === 'function' && context['define']['amd']) { define(name, (dependencies || []), definition); }
  else { context[name] = definition(); }
})('events', function () {
  // Insert code here
  return {
    sayHi: function(name) {
      console.log('Hi ' + name + '!');
    }
  };
}, (this || {}));

最后的对象是对父范围或当前范围的引用，假设您有一个正在编写的包，这只是其中的一部分，那么上下文可能是一个名称空间对象，这只是一个一块馅饼。

此外，如果您希望拥有依赖项，则在您的范围之后的末尾有一个支持数组的可选参数，在这种情况下，定义参数可以利用每个依赖项作为参数。此外，为方便起见，在 node-js 平台中将需要数组中列出的依赖项。

请参阅：https ://gist.github.com/Nijikokun/5192472以获取真实示例。

于 2013-03-18T23:41:42.520 回答
0

我已经解决了这个确切的问题并设法轻松支持：

  • Dojo AMD（参考 RequireJS 规范）
  • jQuery（在 $/jQuery.fn.[your_library_here] 下）
  • node.js 使用香草 require('path_to.js')
  • 浏览器窗口。[your_library_here]

它使用依赖注入和 IIFE 的组合来完成工作。

见下文：

/*global jQuery:false, window:false */
// # A method of loading a basic library in AMD, Node.JS require(), jQuery and Javascript's plain old window namespace.
(function(exporterFunction) {
exporterFunction('cll',
    function(a,b) {
        return a+b;
    }
);
})(
    (function() { // Gets an exportFunction to normalize Node / Dojo / jQuery / window.*

        if ((typeof module != 'undefined') && (module.exports)) { // Node Module
            return function(library_name,what_was_exported) {
                module.exports = what_was_exported;
                return;
            };
        }
        if (typeof define != 'undefined' && define.hasOwnProperty('amd') && define.amd) { // Dojo AMD
            return function(library_name,what_was_exported) {
                define(function() {
                    return what_was_exported;
                });
            };
        }
        if (typeof jQuery === 'function') { // jQuery Plugin
            return function(library_name,source) {
                jQuery.fn[library_name] = source;
                return;
            };
        }
        if (typeof window != 'undefined') { // Fall down to attaching to window...
            return function(library_name,what_was_exported) {
                window[library_name] = what_was_exported;
            };
        }

    })(),
    (function() { 
        // ## Other Parameters Here
        // You could add parameters to the wrapping function, to include extra 
        // functionalilty which is dependant upon the environment... See 
        // https://github.com/forbesmyester/me_map_reduce for ideas.
        return 'this_could_be_more_arguments_to_the_main_function'; 
    })()
);

公共要点可在https://gist.github.com/forbesmyester/5293746获得

于 2013-04-02T16:45:54.093 回答
0

这是基于Nijikokun的回答。由于 RequireJS 不鼓励使用显式模块名称，因此在此版本中已将其省略。加载器的第二个参数描述了依赖关系。[]如果您不需要加载任何内容，则通过。

var loader = function(name, dependencies, definition) {
  if (typeof module === 'object' && module && module.exports) {
      dependencies = dependencies.map(require);
      module.exports = definition.apply(context, dependencies);
  } else if (typeof require === 'function') {
    define(dependencies, definition);
  } else {
    window[name] = definition();
  }
};

loader('app', ['jquery', 'moment'], function($, moment) {
   // do your thing
   return something;
}
于 2015-05-29T20:33:26.470 回答