How do I split my javascript into modules using Google's Closure Compiler?

Question

I want to use the google closure compiler on the javascript source we're using. In development mode we tend to break functionality to lots of files but for production would like to have them combined into modules.

When calling the compiler I can give it a list of files to include for compilation, but the output of that shows that the compiler did not save the order of the files list.

I searched about it and found that I can use goog.provide/good.require in order to control the dependencies between the different js files. The problem with that is that it adds code to my js which I just don't need or want, for example:

goog.provide("mainFile") 

will add this:

var mainFile = {}; 

to the compiled js file, something that I don't want. We're not using the google closure library at all, all I want to use is the compiler.

Is there a way to tell the compiler the order of the files without including more "closure library" functionality which I have no need for? I can of course create a tool of my own which will first take all the files, combine them into one which will then be the input of the compiler, but I would prefer to void that if it can be done by the compiler itself.

---

Edit

The goal is to be able to produce modules like the answer in this thread: Using the --module option in Closure Compiler to create multiple output files

And so I want to add to that the ability to control which files go into which module while also having control on their order. For now I don't use wildcards, but I plan to do so in the future (if it's possible).

simply "cat file1.js file2.js > combined.js && compile..." is fine, but in our case it's a bit more complicated and we'll have to write a program/script that does that based on some logic. If we can somehow tell the compiler the order of the files in advanced it might just save the time of implementing such a program.

Thanks.

Answer 1

Closure-compiler's ability to create multiple output files provides a powerful tool to separate input files into distinct output chunks. It is designed such that different chunks can be loaded at differing times depending on the features required. There are multiple compiler flags pertaining to chunks.

Each use of the --chunk flag describes an output file and it's dependencies. Each chunk flag follows the following syntax:

--js inputfile.js --chunk name:num_files:dependency 

The resulting output file will be name.js and includes the files specified by the preceding --js flag(s).

The dependency option is what you will be most interested in. It specifies what the parent chunk is. The chunk options must describe a valid dependency tree (you must have a base chunk).

Here's an example:

--js commonfunctions.js --chunk common:1 --js page1functions.js --js page1events.js --chunk page1:2:common --js page2function.js --chunk page2:1:common --js page1addons.js --chunk page1addons:1:page1 

In this case, you are telling the compiler that the page1 and page2 chunks depend on the common chunk and that the page1addons chunk depends on the page1 chunk.

Keep in mind that the compiler can and does move code from one chunk into other chunk output files if it determines that it is only used by that chunk.

None of this requires closure-library or the use of goog.require/provide calls nor does it add any code to your output. If you want the compiler to determine dependencies automatically or to be able to manage those dependencies for you, you'll need to use a module format such as CommonJS, ES2015 modules or goog.require/provide/module calls.

Update Note: Prior to the 20180610 version, the chunk flags were named module. They were renamed to reduce confusion with proper JS modules. The answer has been updated to reflect the new names.

Update Note 2: There is now a utility to automatically calculate and generate these flags for you: https://github.com/ChadKillingsworth/closure-calculate-chunks