Modularizing JavaScript

I came to Drupal from a JavaScript background and was happy to see a module system in place. Have you ever wished you could write your JavaScript modularly just like your PHP in order to take advantage of testing, better documentation and the Do One Thing Well philosophy? Well I have the solution for you: Browserify and NPM!

Getting Started

In order to take advantage of JavaScript modularity you will need node and npm which can be installed together using one of these methods.

Creating a JavaScript Module

JavaScript modules are similar to the PHP include system in that they allow the developer to separate their code across multiple files. The key difference is that JavaScript uses the syntax require to pull the exported part of a JavaScript file into the current file's variable of choice. Let's take a look.

Simply create a JavaScript file, do whatever you’re trying to do and assign the resulting value (usually a class or object) to module.exports.

// src/lib/MyClass.js

module.exports = function MyClass(opts) {}

MyClass.prototype.magic = function() { console.log(‘magic’); }

You can now use MyClass.js from other JavaScript files like so:

// src/index.js var MyClass = require(‘./lib/MyClass’);

var classy = new MyClass();

classy.magic(); // ‘magic’

NPM

PHP developers may be familiar with Composer. NPM is the Composer of the JavaScript world. Both allow you to manage the dependencies of your project.

Before creating a custom module it's a great idea to see if it has already been written. npmjs.org is the place to look. When you find a module you’d like to include in your project, retrieve it and add it as a dependency with npm. For example, to install lodash:

npm install lodash --save

The save flag adds this dependency to the package.json file. It might help to think of this as the JavaScript version of composer.json. All the dependencies for a project can be installed by running npm install within the directory containing package.json or its sub-directories.

Requiring modules from NPM is done just like local modules but you don’t have to provide the path, just use the module name. require will look in the node_modules folder automatically.

var _ = require(‘lodash’);

Read more about NPM and package.json on the NPM website.

The Browserify command

Browserify reads your JavaScript files and resolves their module.exports and require's.

Your main JavaScript file should be a compilation of its dependencies resulting in a useful piece of functionality for your website. To compile your multiple files into one that is browser ready we will use the browserify CLI.

First install it globally with npm. Globally installed modules can be accessed from anywhere on your machine.

npm install -g browserify

Then tell Browserify where your main JavaScript file is and redirect the output to where you want your compiled, browser-ready JS to be.

browserify src/index.js > build/myModule.js

build/myModule.js is now browser ready! Now you can add it to your website.

Come see me at BADCamp

The above workflow is a great way to maintain custom Drupal modules with a lot of JavaScript. For more detailed information about using this workflow with Drupal — such as global dependencies, handling jQuery, task automation and testing — come check out my session at this year’s BADCamp!

Code Drupal Planet JavaScript

Read This Next