Local JavaScript Module Imports


May 01, 2015

I have a set of JavaScript patterns that take care of certain common interactions for my projects and thought I'd document how I'm loading the modules I need per project. I'm using a Yeoman generator to get me started:

> yo jigs

This gives me a nice starting project to work with including all my JavaScript patterns I've build over the years. JIGS stands for Jade ImageOptim, Grunt, and Sass. My file structure looks something like:

- root
    - src
        - js
            - modules
                - filters.js
                ...
            - imports.js
            - main.js
        - sass
        - partials
        - views
    - public
        - js
            - master.js
            - master.min.js
        - css
        - img
        - media
    - templates
    - gruntfile.js
    - package.json
    - .gitignore

I'm using Grunt to import my modules from imports.js to main.js, concatenate the compiled main.js with other files I might need (like jQuery) to master.js, jshint my output, and then compress to master.min.js. This allows me to only include the code I need for each project and alerts me when my code doesn't pass linting.

An example of my imports.js file:

/* imports.js imports modules and writes to main.js */

var App = {};

@import "modules/crossbrowser-placeholder.js";
@import "modules/drop.js";
@import "modules/filters-drop.js";

window.onload = function() {
  App.placeholderCrossBrowser();
  App.drop();
  App.filters();
};

This file imports the js modules I need per project using grunt-import.

My modules are wrapped in functions that look like:

App.filters = function(args) {};

Latest Thoughts

Thanks for stopping by!