JQuery source code uses Require.js, but the final file does not work?

Question

Uncompressed jQuery file: http://code.jquery.com/jquery-2.0.3.js jQuery Source code: https://github.com/jquery/jquery/blob/master/src/core.js

What do they do to ensure that the end result does not use Require.js under the hood? The Require.js examples indicate that you embed the entire library in your code to make it stand-alone as a separate file.

Almond.js, a smaller version of Require.js will also tell you to insert itself in your code in order to have a standalone javascript file.

When they reduce me, I don’t care about additional bloating, these are just a few extra killobytes (for almond.js), but unminified are barely readable. I need to scroll all the way down, behind the almond.js code to see my application logic.

Question

How can I make my code look like jQuery in which the final output is not like Frankenweenie?

Answer 1

Short answer:

You need to create your own build procedure.

Long answer

The jQuery build procedure only works because jQuery defines its modules according to a template that allows the convert function to convert the source into a distributed file that does not use define . If someone wants to replicate what jQuery does, there is no shortcut: 1) the modules must be designed according to a template that will disable define calls, and 2) you must have a custom conversion function. This is what jQuery does. All the logic that combines jQuery modules into one file is in build / tasks / build.js .

This file defines the custom configuration that it passes to r.js An important option is:

• out , which is set to "dist/jquery.js" . This is the only file created by optimization.

• wrap.startFile , which is set to "src/intro.js" . This file will be added to dist/jquery.js .

• wrap.endFile , which is set to "src/outro.js" . This file will be added to dist/jquery.js .

• onBuildWrite , which is set to convert . This is a custom feature .

The conversion function is called every time r.js wants to output the module to the final output file. The result of this function is that r.js writes to the destination file. It performs the following actions:

• If the module is from the var/ directory, the module will be converted as follows. Let us consider the case of src / var / toString.js :

   define([ "./class2type" ], function( class2type ) { return class2type.toString; }); 

  It will become the following:

   var toString = class2type.toString; 

• Otherwise, the call to define(...) is replaced by the contents of the callback passed to define , the final return is lost and any exports assignments are deleted.

I missed the details that are not specifically relevant to your question.

Answer 2

You can use the AMDClean by gfranko tool https://www.npmjs.org/package/amdclean This is much simpler than jQuery does, and you can quickly set it up.

All you have to do is create a very abstract module (the one you want to open to the global area), and include all your auxiliary modules in it.

Another alternative that I recently used is browserify . You can export / import your modules using NodeJS and use them in any browser. You need to compile them before use. It also has gulp and grunt plugins for workflow customization. For a better explanation, read the documentation at browserify.org .