Transpiling ES6 Modules to AMD & CommonJS Using Babel & Gulp
I covered how ES6 can be used today to write Angular 1.x applications in one of my previous articles. In this article I used Traceur’s on-the-fly transpiler to run the application. Although it works, it is always better to transpile beforehand and reduce the amount of work to be done in the browser. In this article, we will see how the same sample application can be transpiled to ES5 and the modules into either CommonJS or, AMD using Babel to make it run on today’s browsers. Though the sample is based on Angular, the techniques of transpilation can be used with any valid ES6 code.
As ever, you can find the code to accompany this article on our GitHub repo.
The Importance of Modules
One of the key features in any language used to write large applications, is the ability to load different pieces of the application in the form of modules. Modules not only help us keep the code cleaner but they also play a role in reducing the usage of global scope. The contents of a module are not made available to any other module unless the other module explicitly loads it.
If you’d like a quick primer on using modules in ES6, please read: Understanding ES6 Modules
About the Sample Application
The subject of our sample application is a virtual book shelf. It consists of the following pages:
- Home page: shows a list of active books that can be marked as read, or moved to the archive.
- Add book page: adds a new book to the shelf by accepting title of the book and name of author. It doesn’t allow a duplicate titles.
- Archive page: lists all archived books.
The application is built using AngularJS 1.3 and ES6. If you look at any of the files in the
app folder, you will see the keywords
import used to export objects from the current module and to import objects from other modules. Now, our job is to use Babel’s Gulp tasks to convert these modules to one of the existing module systems.
But I’m Not Using Angular. I Just Want to Convert ES6 Modules to CommonJS/AMD
No worries! We got you covered. With a minor amount of tweaking the recipes demonstrated below can be used in any project involving ES6 modules. Angular is quite unimportant here.
Converting to CommonJS
CommonJS is a module system defined by the CommonJS group. It is a synchronous module system, in which the modules are loaded using the
require function and exported using the
exports property of the
module object. The
module object is expected to be available in all modules by default.
Node.js uses this module system, so it defines the
module object natively and makes it available to your application. As browsers don’t have this object defined, we need to use a utility called Browserify to fill the gap.
Before we start, we will also need to install a few npm packages. These will enable us to use babel and browserify in conjunction with Gulp to convert our ES6 modules to one of the common module formats and package the application as a single file for the browser to consume.
Continue reading %Transpiling ES6 Modules to AMD & CommonJS Using Babel & Gulp%