如何改造现有文件为 CMD 模块_改为cmd文件-优快云博客

本文介绍如何将jQuery、Moment等主流JavaScript库改造为符合CMD规范的模块，包括去除AMD支持、手动引入依赖及暴露接口的方法，并提供jQuery插件的具体改造示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

改造主流模块

这里指的是 jQuery、Moment、Backbone、underscore 等业界主流模块，这些模块一般都有对 AMD 和 CommonJS 的支持代码，例如 jQuery 源文件的最后几行：

if ( typeof module === "object" && module && typeof module.exports === "object" ) {
    module.exports = jQuery;
} else {
    window.jQuery = window.$ = jQuery;

    if ( typeof define === "function" && define.amd ) {
        define( "jquery", [], function () { return jQuery; } );
    }
}

还有 Backbone 里：

var Backbone;
if (typeof exports !== 'undefined') {
  Backbone = exports;
} else {
  Backbone = root.Backbone = {};
}

对于有这些兼容代码的，只需要去掉 define.amd 的支持，或是直接包装上 define 就可以了。

define(function(require, exports, module) {
  // code here ...
});

如果没有模块化的兼容代码，有时候需要手动引入依赖，以及暴露对应的接口。

define(function(require, exports, module) {
  var $ = require('$');
  // code here ...
  module.exports = Placeholders;
});

现有的 JS 文件

对于一些现有的普通 JS 文件，相对简单的多，参考 CMD 的书写规范，把那些暴露到全局命名空间的接口用 CMD 的方式进行改造就可以了。

比如现有文件 util.js 。

window.util = window.util || {};
util.addClass = function() {
  window.css();
};
util.queryString = function() {};

改为

define(function(require, exports, module) {
  // 引入依赖
  var css = require('css');

  util.addClass = function() {
    css();
  };
  util.queryString = function() {};

  // 暴露对应接口
  module.exports = util;
});

改造 jQuery 插件

这也是一个经常遇到的问题，推荐以下的包装方式：

// jquery-plugin-abc
define(function(require, exports, module) {
  var $ = require('$');
  // 插件的代码
  $.fn.abc = function() {};
});

这样的改造方式实际上是强化了原有的 $ 对象（而不是重新包装出一个新的 $），在实际调用时，可以用下面的方式：

seajs.use(['$', 'jquery-plugin-abc'], function($) {
  // $ 有了 jquery-plugin-abc 所提供的插件功能
  $.abc();
});