Last Updated: February 25, 2016
· emi420

A simple way to work with several files in JavaScript

Working with JavaScript can be a mess if you don't split your code in several files.

Suppose you have a products catalog, maybe your JavaScript application can be divided in this modules:

  • Application init
  • Product list
  • Product card

And your code, a single file named "catalogApp.js" with something like this:

var App = function(options) {
    return this;
App.prototype = {
   init: function() {

var ProductList = function ...
var ProductCard = function ...

The problem here is organization. All the codebase in one single file is not a good idea, for many reasons.

GNU make

A simple way to solve this problem, is using the GNU make utility, available commonly on Unix sytems like Linux or Mac OS X (require Xcode and Command Line Tools) and Windows using GnuWin32.

You can divide the catalog app in three files, one per module, this way:

  • app.js - Application init
  • product_list.js - Product list
  • product_card.js - Product card

And concatenate them in a single file, using the "cat" command ("type" in Windows):

cat app.js\
    > catalogApp.js

The "make" command needs a configuration file (Makefile):


    @@echo "Building..."
    @@cat app.js\
          > $(RELEASE_DIR)/$(RELEASE_FILE)
    @@echo "Build completed."

Now you can go to the project's source code folder and type "make" in order to compile your code in a single file. You can add other lines to the "Makefile" too, for example to check or minify your code.