4.14 Running CommonJS modules with Browserify

In the preceding recipes we learned how to declare and import CommonJS modules in this chapter we will learn how to run CommonJS modules.

Getting Ready

All you need to implement in this recipe is an installation of TypeScript 2.0 or higher, Gulp, Browserify and the gulp-typescript plugin.

How to do it

The companion source code showcases (check out the file named common.js under the node directory) how CommonJS can be imported from a Node.js script without no further steps required:

const _ = require('../src/module_definitions/run_time/external/commonjs/ndrscr.js');

const result1 = _.arrays.first([5, 4, 3, 2, 1], 3);
console.log(result1);

const result2 = _.arrays.last([5, 4, 3, 2, 1], 3);
console.log(result2);

//…

The main problem of CommonJS modules is that they cannot be used natively in a web browser. The good news is that we can use a module bundler to solve this problem. In some of the previous recipes in this chapter we learned that we can use the RequireJS optimizer to create a bundle file which contains all the AMD modules in an application. In a similar manner, we can use a tool known as Browserify to generate a bundle file, which contains all the CommonJS files in an application. The bundle file can then be imported in a web browser. We can use the following Gulp task to transform CommonJS modules into a single bundle file using Browserify:

gulp.task('bundle-commonjs-with-browserify', function () {
    const mainJsFilePath = 'src/module_definitions/run_time/external/commonjs/ndrscr.js';
    const outputFolder = 'src/module_loaders/browserify/';
    const outputFileName = 'bundle.js';

    const bundler = browserify({
        entries: mainJsFilePath,
        standalone: 'ndrscr'
    });

    return bundler.bundle()
        .pipe(source(outputFileName))
        .pipe(buffer())
        .pipe(gulp.dest(outputFolder));
}); 

How it works

As we can see we have configured the applications root module: const mainJsFilePath = ‘src/module_definitions/run_time/external/commonjs/ndrscr.js’; The output folder:

const outputFolder = 'src/module_loaders/browserify/';

Finally, we configured the name of the bundle file:

const outputFileName = 'bundle.js';
We also configured used the standalone Browserify option to generate a module that can be used on its own without using a module loader:
const bundler = browserify({
        entries: mainJsFilePath,
        standalone: 'ndrscr'
    });

The stand alone option take a string, this string is used as the name of a variable that takes the public parts of the application as its value. After doing this we will be able to import the generated bundle.js file from a web browser without the need of a module loader:

<script src="../../src/module_loaders/browserify/bundle.js"></script>

The variable ndrscr is declared in the global scope when we import the module using a script tag so we can access it from other JavaScript files loaded after the bundle file was loaded:

<script>
  const _ = ndrscr;

    const result1 = _.arrays.first([5, 4, 3, 2, 1], 3);
    console.log(result1);

    const result2 = _.arrays.last([5, 4, 3, 2, 1], 3);
    console.log(result2);

  // ...

</script>

Source Code

Running CommonJS modules with Browserify

See also

Please refer to the recipes about ES6 to learn about the declaration of external modules. Refer to the recipes about AMD and UMD to learn more about these module definition syntaxes. You can also refer to the first chapter to learn more about Gulp.


Shiv Kushwaha

Author/Programmer