Modernizing RequireJS with ECMAScript 2015

Nowadays, we have build engines like webpack, rollup and fusebox that make using ECMAScript 2015 a breeze.

But what about legacy projects that use, for example, RequireJS? How can we refactor them and move them towards a future-proof code-base?

In terms of economical thinking, this is not always an easy task. Switching to an entirely different build engine is both error-prone as well as time-intensive.

But what if I told you, that we at SHOPMACHER eCommerce faced the exact same problem and solved it? Using ECMAScript 2015 along with RequireJS in less than an hour of setup?

This is how!

The Goal

Our focus was, to integrate ECMAScript 2015 into our code-base without having to refactor or change any of our existing code-base. The build process (we are using Grunt) should remain untouched.

By the end of this article, you will know, how to do the same.

Setup

To get started, all you need is your RequireJS project and one simple npm package.

npm i -D requirejs-es2015

This package will take care of transpiling your ECMAScript 2105 code to ECMAScript 5 before it gets bundled.

For those interested in how it works:
https://github.com/SHOPMACHER/requirejs-es2015

Integration with RequireJS

If you are using RequireJS, there is a high chance, you have s require.config.js (or similar) in your project.

This is the file, you need to edit in order to tell RequireJS how to load ECMAScript 2015 files.

requirejs.config({
    // ...
    paths: {
        es: 'node_modules/requirejs-es2015/es'
    },
    babel: {
        fileExtension: '.es6' // extension of your ES2015 files - defaults to .js
    }
    // ...
});

As you see in the example, you need to specify the path to the requirejs-es2015 module and tell the transpiler (babel), which file extensions to look for. The file extension defaults to .js , but I recommend to use .es6 to be able to tell, which files have already been migrated.

Using ECMAScript 2015

With the setup being complete, you can now start to write your first ECMAScript 2015 Module and integrate it.

Lets start by defining a simple module, like this:

// hello.es6
export function sayHello() {
    console.log('Hello!');
}

Assuming you saved this file as hello.es6 , you can now call the exported function in your RequireJS module.

define([
    'es!hello'
], function(Hello) {
    Hello.sayHello();
});

In the example above, we require our module with the alias Hello . The module provides the exported functions from our file.

Note that we need to prefix the require statement with es! . This is the alias, we defined for the requirejs-es2015 package in our require.config.js .

ESNext

The requirejs-es2015 module enables you to use ECMAScript 2015 syntax by default. However, if you wish to use syntax features from future ECMAScript implementations (ESNext), you can by providing your own .babelrc file with the desired presets and plugins.

requirejs-es2015 is built to make use of your projects .babelrc , so you can choose, which presets and plugins you want to use.

Lets say, you want to use ESNext features, you can edit your .babelrc like this:

{
    "presets": ["env", "stage-0"]
}

After installing the required node modules

npm i -D babel-preset-env babel-preset-stage-0

you are good to go.

Final words

Using our plugins, you should now be able to migrate your RequireJS code-base to ECMAScript 2015 step-by-step. If there are any question, I’ll we grateful to answer them in the comments.

Otherwise hit me up on Twitter: @rherwig4711

Or submit an issue at: https://github.com/SHOPMACHER/requirejs-es2015