An ECMAScript 6, CommonJS and RequireJS Project

I’ve been writing a lot of CommonJS code recently – the sort that you would include in Node projects on the server side. I’ve recently had a thought that I would like to do a browser-side project. However, how do you produce a browser library that can be consumed by everyone?

The different styles of modules

Let’s say I have a class Client(). If I were operating in Node or Browserify, I’d do something like this:

var Client = require('my-client-package');

var myclient = new Client();

This is called CommonJS format. I like it – it’s nice and clean. However, that’s not the only way to potentially consume the library. You can also bring it in with RequireJS:

define(['Client'], function(Client) {
    var myclient = new Client();

});

Finally, you could also register the variable as a global and bring it in with a script HTML tag:

<script src="node_modules/my-client-package/index.js"></script>
<script>
    var client = new Client();
</script>

You can find a really good writeup of the differences between CommonJS and AMD in an article by Addy Osmani.

Three different techniques. If we were being honest, they are all valid and have their place, although you might have your favorite technique. As a library developer, I want to support the widest range of JavaScript developers which means supporting three different styles of code. This brings me to UMD format. I named it “Ugly Module Definition”, and you can see why when you look at the code:

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['b'], function (b) {
            return (root.returnExportsGlobal = factory(b));
        });
    } else if (typeof module === 'object' && module.exports) {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like enviroments that support module.exports,
        // like Node.
        module.exports = factory(require('b'));
    } else {
        // Browser globals
        root.returnExportsGlobal = factory(root.b);
    }
}(this, function (b) {
    // Use b in some fashion

    return {// Your exported interface };
}));

Seriously, could this code be any uglier? I like writing my code in ECMAScript 2015, also known as ES6. So, can I write a class in ES6 and then transpile it to the right format? Further, can I set up a project that has everything I need to test the library? It turns out I can. Here is how I did it.

Project Setup

These days, I tend to create a directory for my project, put some stuff in it and then push it up to a newly created GitHub repository. I’m going to assume you have already created a GitHub user and then created a GitHub repository called ‘my-project’. Let’s get started:

mkdir my-project
cd my-project
git init
git remote add origin https://github.com/myuser/my-project
npm init --yes
git add package.json
git commit -m "First Commit"
git push -u origin master

Perhaps unshockingly, I have a PowerShell script for this functionality since I do it so often. All I have to do is remember to check in things along the way now and push the repository to GitHub at the end of my work.

My Code

I keep my code in the src directory, The tests are in the test directory. The distribution file is in the dist directory. Let’s start with looking at my src/Client.js code:

export default class Client {
    constructor(options = {}) {
    }
}

Pretty simple, right? The point of this is not to concentrate on code – it’s about the build process. I’ve also got a test in the test/Client.js file:

/* global describe, it */

// Testing Library Functions
import { expect } from 'chai';

// Objects under test
import Client from '../src/Client';

describe('Client.js', () => {
    describe('constructor', () => {
        it('should return a Client object', () => {
            let client = new Client();
            expect(client).to.be.instanceof(Client);
        });
    });
});

I like to use Mocha and Chai for my tests, so this is written with that combination in mind. Note the global comment on the first line – that prevents Visual Studio Code from putting green squiggles underneath the mocha globals.

Build Modules

I decided some time along the way that I won’t use gulp or grunt unless I have to. In this case, I don’t have to. My toolset includes:

Let’s take a look at my package.json:

{
    "name": "my-project",
    "version": "0.1.0",
    "description": "A client library written in ES6",
    "main": "dist/Client.js",
    "scripts": {
        "pretest": "eslint src test",
        "test": "mocha",
        "build": "babel src --out-file dist/Client.js --source-maps"
    },
    "keywords": [
    ],
    "author": "Adrian Hall <adrian@shellmonger.com>",
    "license": "MIT",
    "devDependencies": {
        "babel-cli": "^6.3.17",
        "babel-plugin-transform-es2015-modules-umd": "^6.3.13",
        "babel-preset-es2015": "^6.3.13",
        "babel-register": "^6.3.13",
        "chai": "^3.4.1",
        "eslint": "^1.10.3",
        "mocha": "^2.3.4"
    },
    "babel": {
        "presets": [
            "es2015"
        ],
        "plugins": [
            "transform-es2015-modules-umd"
        ]
    }
}

A couple of regions need to be discussed here. Firstly, I’ve got two basic npm commands I can run:

  • npm test will run the tests
  • npm run build will build the client library

I’ve got a bunch of devDependencies to implement this build system. Also note the “babel” section – this is what would normally go in the .babelrc – you can also place it in your package.json file.

The real secret sauce here is the build script. This uses a module transform to create a UMD format library from your ES6 code. You don’t even have to worry about reading that ES5 code – it’s ugly, but it works.

Editor Files

I use Visual Studio Code, so I need a jsconfig.json file in the root of my project:

{
    "compilerOptions": {
        "target": "ES6"
    }
}

This tells Visual Studio Code to use ES6 syntax. I’m hopeful the necessity of this will go away soon. I’m hoping that I’m not the only one who is contributing to this repository. Collaboration is great, but you want to set things up so that people coming newly in to the project can get started with your coding style straight away. I include a .editorconfig file as well:

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 4
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.json]
insert_final_newline = false

You can read about editorconfig files on their site. This file is used by a wide variety of editors – if your editor is on the list, you should also install the plugin.

ESLint Configuration

I have a .eslintrc.js file at the root of the project. I’ve got that in a gist since it is so big and I just cut and paste it into the root directory.

Test Configuration

My test directory is different – it expects to operate within mocha, so I need an override to tell eslint that this is all about mocha. Here is the test/.eslintrc file:

module.exports = exports = {
    "env": {
        "es6": true,
        "mocha": true
    }
};

I also need a mocha.opts file to tell mocha that the tests are written in ES6 format:

--compilers js:babel-register

Wrapping up

You will need a dist directory. I place a README.md file in there that describes the three use cases for the library – CommonJS, AMD and globals. That README.md file is really only there to ensure the dist directory exists when you clone the repository.

I also need to add a README.md at the root of the project. It’s required if I intend to publish the project to the NPM repository. Basic instructions on how to install and use the library is de rigeur, but you can put whatever you want in there in reality.

I have not addressed jsdoc yet – you should be doing it in your source files, and it should be a postbuild step in your package.json file.

You can now run the tests and build through the npm commands and get a library that can be used across the board.

Testing a NodeJS Library with Mocha and Chai

I’ve asserted before that I am not a “professional developer” partly because I don’t test. There are three things in testing that are important – a willingness to put in the time to learn a test framework, the writing of the tests and the adoption of a testing methodology. Today, I’m going to do all three for my latest project – a configuration framework for NodeJS that I am writing.

Testing Methodologies

Let’s start with the adoption of a testing methodology. One could write the code and then write some unit tests that test that code to make you feel good about releasing the library. It’s not really a methodology.

Test Driven Development is the first of the methodologies I can discuss. In TDD, you write the tests first – based on what the code is meant to do. This requires a level of design, of course. You get to write code that your library should run. Then you continually write code until all the tests pass. You are pretty well guaranteed to have 100% test coverage because you are coding against the tests. Once the tests pass, the code is complete.

TDD does fall down in a couple of areas – most notably where state comes into play. TDD is not a good fit for UI testing, for example. In the case of a library, your API is a contract – it either passes or fails. If you have enough tests to describe the API fully, then you’ve got a good test suite. In the land of UI development, however, there are corner cases. What if a user does something unexpected? One could assert that the UI is also a contract between a user and the program, but there are lots of things that can happen; including device differences, environment differences and so on that make this not so straight forward an answer.

BDD (which is Behaviour Driven Development) is a similar methodology but describes behaviours, not unit tests. For example, in my configuration example – TDD would test each method; BDD would test the act of producing a valid configuration.

There are other tests that you should consider aside from unit tests. You should definitely do some tests that are end-to-end (normally abbreviated as E2E). In my example, I want to support a set of common patterns for producing configurations, so I definitely want to test those situations.

Choice: TDD – the writing of unit tests and some E2E tests for the common patterns.

Testing Toolsets

This brings us to testing tools. In the NodeJS world, there are choices. I often got stuck on the implementation details of tests and that caused me to spin, eventually leading me to dropping testing because I just couldn’t decide. In general, you need to decide on two pieces – an assertion library and a test runner. Based on my prior research, I decided on Mocha and Chai. Mocha is the test runner and Chai is the assertion library. There is good information on each website, so I’m not going to go into detail. Instead I’m going to focus on setting up testing on my project.

Writing Tests

I’m using TypeScript and Visual Studio to generate all my code for this library I am writing. In my previous post, I set up the project and loaded it into Visual Studio. Today, my first step is to create a folder called test. Since I have the Node Tools for Visual Studio installed, I can write-click on the tests folder and select Add > New Item… There is a Mocha UnitTest File as an option under Node.js in both a JavaScript and TypeScript variety. I like to be able to run my build process without compilation, so my library is written in TypeScript, but the Gulpfile and unit tests are written in JavaScript:

09292015-1

I have not included Mocha or Chai in my project. Since I am in Visual Studio, I can expand the npm view in my Solution Explorer, right-click on the dev node and select Install new npm packages…

09292015-2

Searching for Mocha and Chai is enough:

09292015-3

One of the neat things about this is the warning it gives you on Windows:

09292015-4

Yes, you want to run npm dedupe. Fortunately, npm3 will get rid of this annoyance, but it isn’t the default release yet. Back to the test file. I’ve got a class – Configuration – that I want to test. It has a number of methods that I also want to test individually. Each method will have a number of tests associated with it. I’ve created a configuration.js on the test directory. Mocha will run all of the JavaScript files in the test directory by default. Here is my initial code:

var expect = require('chai').expect,
    Source = require('../dist/Source');

describe('Source', function () {
    describe('.keys()', function () {
        // Tests for the Source.keys() method
    });

    describe('.type', function () {
        // Tests for the Source.type property
    });

    describe('.location', function () {
        // Tests for the Source.location property
    });

    describe('.get()', function () {
        // Tests for the Source.get() method
    });
});

The first line brings in the expect syntax from the Chai library. Chai supports three different syntax implementations – should, expect and assert. They are mostly similar but do have some minor implementation differences. I like the readability of expect so I’m going to use that. I also bring in my library under test. Finally, I describe the library of tests I am going to run – the outer describe says I am testing the Source class and the inner describes say I am testing a particular method. You can next as much as you want.

Writing the tests

Let’s take the type property. I try to think about the tests first. Here is my logic:

  • It is set by the constructor
  • It is read-only
  • It is a string

Here is my code:

    describe('.type', function () {
        it('should return a string', function (done) {
            var s = new Source('static');
            expect(s.type).to.be.a('string');
        });

        it('sould be the same as the constructor value', function (done) {
            var s = new Source('static');
            expect(s.type).to.equal('static');
        });

        it('should be read-only', function (done) {
            var s = new Source('static');
            expect(function () { s.type = 'new-value'; }).toLocaleString.throw(Error);
        });
    });

I find these tests to be highly readable. Each test case is self-contained – you could run any of these tests by itself and not worry about the state of the test system.

Running Tests

Before running tests, you need to have mocha installed globally so you can run it:

npm install -g mocha

Now I need a stub of my eventual implementation:

class Source {
    constructor(type: string, filename?: string) {
    }

    get type(): string {
        return null;
    }
}

export = Source;

Running mocha gets me a whole bunch of errors, but look at the top of the output:

09292015-5

Now I can run mocha whenever I want. You will note that the stack trace from the assertion library is printed for each error. One of the things I like doing is working on “the next error” – you can do this easily with mocha -b:

09292015-6

Integrating into the Build Workflow

I want to integrate testing into my workflow. There are two things I want to do here:

  1. Run npm test to test the project
  2. Run Mocha as part of my Gulp standard pipeline

Adding npm test support is easy – just add a “test” entry to the “scripts” section of the package.json file:

  "scripts": {
    "test": "mocha"
  },

Integrating into gulp is also easy. Use the gulp-mocha library:

gulp.task('build', ['compile'], function () {
    return gulp.src('./test/**/*.js', { read: false })
        .pipe(mocha({ reporter: 'spec' }));
});

Here, my compile task compiles my code into the distribution area, ready for testing and usage.

Wrap Up

I’ve said a few times in the past that I need to learn testing techniques. Mocha and Chai make it easy. Now all I have to do is ingrain testing into my development world – write tests first and then code to the test. At least I have the tools and workflow to do this task properly.