How to transform an existing file into a CMD module

After a period of investigation, we have finally introduced the module mechanism and sea.js in the project, so how to transform the existing file into a CMD module becomes an important problem. Here are some typical scenarios to illustrate how packaging works.

First of all, please learn more about the following CMD module definition specification, as long as the definition and nature of things, all problems can be solved.

Transform the mainstream module

This refers to industry-leading modules such as jquery, moment, Backbone, underscore, which generally have support codes for AMD and CommonJS, such as the last few lines of the jquery source file:

if (typeofModule===The object"&& module && typeof Span class= "PL-C1" >module.exports ===  Objectmodule.exports = jQuery;} else {window.jquery = window.$ = jQuery; if (typeof define ===   "Function" && define.amd) {define ( "Jqueryfunction () { return jQuery;} ); }} 

And in the Backbone:

var Backbone; if (' undefined= {};}  

For these compatible codes, just remove the DEFINE.AMD support, or just wrap define it up.

Define (module) {  //code here ...});  

If there is no modular compatible code, it is sometimes necessary to manually introduce dependencies and expose the corresponding interfaces.

Define (function (module) {  require (' $= placeholders;});    

You can refer to the Gruntfile in cmdjs/gallery for the code substitution of these mainstream modules.

The existing JS file

For some of the existing ordinary JS files, relatively simple, and reference to the code of the CMD, the interface exposed to the global namespace with the method of CMD transformation can be.

such as existing files util.js .

|| {}; util.window.css ();}; util.function () {};   

Switch

Define (module) {  //introduces dependent  require (' cssutil.util.= util;}); 

Here is not verbose, is the basic code of the CMD writing. In the actual transformation process, the situation can be more complicated than the above example, the specific situation of the specific solution on the line.

Transform JQuery Plugins

This is also a frequently encountered problem, we recommend the following packaging methods:

Jquery-plugin-abcdefine (function (module) {  require (' $$.fn.function () {};});  

This modification is actually enhanced by the original $ object (instead of repackaging a new $), and in the actual invocation, it can be done in the following way:

Seajs.use ([' $' jquery-plugin-abc function(///$ has the plug-in feature provided by JQUERY-PLUGIN-ABC $.ABC ();});   

More JQuery plug-in packaging, you can refer to the practice in Cmdjs/jquery.

Tools

In addition to the manual way to modify the code, we recommend the use of Grunt for a unified transformation, the official also through the Grunt transformation of many mainstream modules and JQuery plug-ins, specific operating manuals see the introduction of the CMD Module guide. You can find specific gruntfile in Cmdjs/gallery and cmdjs/jquery to learn from your project. All packaged modules can be found in the spmjs.org.

Summary

The above provides a method of wrapping the original code CMD 书写规范 , which may also need to be packaged as a named module (the module containing the ID) before it is launched. Further knowledge of construction can be found in building tools.

The packing methods mentioned here are more typical and simple, and the concrete practice may vary widely. What you have to explore, practice and question in the project, welcome to share and ask questions here.

Content Source: https://github.com/seajs/seajs/issues/971

How to transform an existing file into a CMD module