I’d suggest using gulp as a build tool for its simplicity in setting it up, but you could also use Grunt or any other build tool you’d like. We’ll set up these build tools later. I’m going to take an existing project and convert it to ES6, then when that’s done, use gulp with babel to convert it to ES5.
Import you heart out
You should be able to follow along pretty easily here with what it is happening. Instead of using the define method to bring in external modules, you use the import keyword to designate the modules. When you use babel to transpile to ES5 there will be an option to turn this into an AMD module and it will use the deifne method in its output. That’s right, you can transpile your ES6 to commonjs require style or AMD define style. We’ll get to that later. Let’s look at another one.
There’s a couple of things happening here. First is that instead of returning the module, we are using the syntax export default, which means you are exporting the default method or object from this module. This is how you can make your module available to be imported by other modules. You can read more about this module behavior here. Also notice how for postCreate(), we didn’t have to use the function keyword. This is a little syntactic sugar in ES6 that works for functions that are part of classes or objects.
Speaking of classes…
I won’t go over all the module changes here, but you can check out the full project on github.
Take a gulp