Using ES6 modules in an ES5 RequireJS project
My goal was to create a simple RequireJS module which requires the ES6 transpiled module as a dependency.
Writing the modules
The ES6 module uses some of the new ES6 language features,
const and the simpler method definition.
The module will export a class called
Hello with a static function
render() to add an
H1 to the page.
This will the be transpiled to a file named
The ES5 RequireJS module imports the ES6 transpiled module and calls the static function from the exported class via
Integrating into a Grunt build process
Our project uses Grunt to build the codebase and again it was easy to integrate the transpiling of ES6 code into the build process.
The Grunt plugin grunt-6to5 makes it as simple as adding the following to the
To transpile the ES6 module into an AMD module suitable for RequireJS set the
modules option to
Some issues I think we’re going to have to work around include:
- having to pre-transpile the tests before running them, currently they point directly to the source
- how will we adjust to debugging in the browser via sourcemaps
For further information on ES6 modules and the 6to5 transpiler see the following pages: