Creating JavaScript modules with Babel and ES7

Last year, a new version of JavaScript was released with a lot of new goodies. One of them was that the syntax for importing and exporting modules was codified as the "only way" to handle JavaScript modules. Well, it's finally here. Another good thing is that it's organized in a way that you can statically analyze the entire module dependency tree. Pretty cool.

Let's take a look at the syntax:

 import v from "mod" ;
 import * as obj from "mod" ;
 import {x} from "mod" ;
 import {x as v} from "mod" ;
 import   "mod" ; 
 
 export   var v;
 export   default   function f(){};
 export   default   function (){};
 export   default 42;
 export {x};
 export {x as v};
 export {x} from "mod" ;
 export {x as v} from "mod" ;
 export * from "mod" ;

So, basically you can import the main value of a module ("default"), or a specific property from explicit exports, or a combination of both, or anything else. Correspondingly, you can export a value for the default module, or an object with multiple properties. You can also export properties one by one. ***Please refer to the style guide for style ;)

ES7 also adds some small additions to this kind of syntax.

 export * as ns from "mod" ;
 export v from "mod" ;

Nothing special, but when can we use them? We'll have to wait and see. Just like many ES6 syntax features, if you don't plan to support them now, you can use a tool called Babel to transpile them back to ES5. Once you are ready to support them, you can stop Babel from transpiling.

Let's take a look at how this works. We'll implement this in Node.js and NPM. Try executing this file;

src/letter_keys.js

 // you would have a constant for each key  
 // (I would normally uppercase all constants)  
 const a = 119;
 const d = 100;
 const s = 115;
 const w = 119; 
 
 // you would export all keys here  
 // note: you can't say `w: 119` here. It just isn't valid.  
 // This destructures to `w: w, a: a, ...`  
 export {
 w,
 a,
 d,
 s,
 }

src/arrow_keys.js

 const UP = 38;
 const RIGHT = 39;
 const DOWN = 40;
 const LEFT = 37; 
 
 export {
 UP,
 RIGHT,
 DOWN,
 LEFT,
 }

src/move.js

 export {a, w, s, d} from './letter_keys' ;
 export * as ARROWS from './arrow_keys' ;

The assumption is that the main index.js file is used for the export of the internal module contents, and it assumes that these keys are exported from other files. This example is a bit convoluted, but that's okay.

src/index.js

 import * as keys from './move' ;
 console.log(keys);

This can be used as part of a project that depends on this module. It should print the awsd key and the arrow object. Let's start with npm. Create the repo dir and initialize it:

 ~$ mkdir foo
 ~$ cd foo
 ~/foo$ mkdir src
 # put src files above in ~/foo/src  
 ~/foo$ npm init -yes
 ~/foo$ npm install babel-cli babel-preset-es2015 babel-preset-stage-1 -D

This will take a while. As you might have guessed, babel-cli supports running Babel from the command line (6), and the babel-preset-stage-1 package provides the relevant ES7 module transpilation tools (at the time of writing). The -yes flag will cause npm to create a default package.json without asking the user. The -D flag is short for --save-dev, and will add the package to the devDependency entry in package.json. Now, add the preset parameters to the default babel configuration file:

.babelrc

 { 
   "presets" : [ "es2015" , "stage-1" ]
 }

If this works, great! hello, future! However, at the time of writing, none of these examples will work in ES6, let alone Node.js. After these transpilation steps, they can be executed anyway.

You should now have an almost empty package.json file that contains the three dev dependencies we added. Let's add a script to this package.json file to enable transpilation:

 ... 
   "scripts" : { 
     "test" : "echo " Error: no test specified " && exit 1" , 
     "translate" : "node_modules/babel-cli/bin/babel-node.js src/index.js"  
 },
 ...

(Just add the "translate" line and the comma after the "test" line).

This transpilation script is a compilation step. At the end of the article, you can find the final package.json file used in this article (official version). Now, all that’s left is to call npm to run the script to transpile and run our code.

 ~/foo$ npm run translate --silent 
 
 { A: [Getter],
 W: [Getter],
 S: [Getter],
 D: [Getter],
  ARROWS: { UP: 38, RIGHT: 39, DOWN: 40, LEFT: 37 } }

Go for it! Now, as a bonus, we can use Jscrambler to "obfuscate" the code a bit. We can pass Babel transpiled code, so why not?

Our (final) package.json file looks like this:

package.json

 { 
   "name" : "foo" , 
   "version" : "1.0.0" , 
   "description" : "" , 
   "main" : "index.js" , 
   "scripts" : { 
     "test" : "echo " Error: no test specified " && exit 1" , 
     "translate" : "node_modules/babel-cli/bin/babel-node.js src/index.js"  
 }, 
   "keywords" : [], 
   "author" : "Your Name <[email protected]> (http://localhost/)" , 
   "license" : "ISC" , 
   "devDependencies" : { 
     "babel-cli" : "6.6.5" , 
     "babel-preset-es2015" : "6.6.0" , 
     "babel-preset-stage-1" : "6.5.0" , 
     "jscrambler" : "0.7.5"  
 }
 }

Complete the configuration as usual (if you are using Node.js, you will need a pro account). Here are the files I used

.jscramblerrc

 { 
   "keys" : { 
     "accessKey" : "See https://jscrambler.com/en/account/api_access" , 
     "secretKey" : "See https://jscrambler.com/en/account/api_access"  
 }, 
   "params" : { 
     "constant_folding" : "%DEFAULT%" , 
     "dead_code" : "%DEFAULT%" , 
     "dead_code_elimination" : "%DEFAULT%" , 
     "dictionary_compression" : "%DEFAULT%" , 
     "dot_notation_elimination" : "%DEFAULT%" , 
     "function_outlining" : "%DEFAULT%" , 
     "function-reorder" : "%DEFAULT%" , 
     "literal_duplicates" : "%DEFAULT%" , 
     "literal_hooking" : "2;8" , 
     "member_enumeration" : "%DEFAULT%" , 
     "mode" : "nodejs" , 
     "rename_local" : "%DEFAULT%" , 
     "string_splitting" : "0.3" , 
     "whitespace" : "%DEFAULT%"  
 }
 }

Let's summarize it with a script. This script will translate the source files with Babel, output to the /build folder, then use Jscrambler to obfuscate the code, and then put the result into the /dist folder. The content in /dist can be run normally without using any ES7 features.

run.sh

 #!/bin/sh   
 
 echo "Babelifying src/*.js"  
 node_modules/babel-cli/bin/babel.js -d build src/*.js
 echo "Scrambling build/*.js"  
 node_modules/jscrambler/bin/jscrambler -o dist build/src/**
 echo "Clean up artifacts"  
 mv dist/build/src/* dist/
 rmdir dist/build/src
 rmdir dist/build
 echo "Done! See dist/scrambled.js"  
 echo "Running:"  
 node dist/index.js

Make it ready:

 chmod +x run.sh

Next, run:

 ~/foo$ ./run.sh
 Babelizing src/*.js
 src/arrow_keys.js -> build/src/arrow_keys.js
 src/index.js -> build/src/index.js
 src/letter_keys.js -> build/src/letter_keys.js
 src/move.js -> build/src/move.js
 Scrambling build/*.js
 Clean up artifacts
 Done! See dist/ for your scrambled files
 Running:
 { a: [Getter],
 w: [Getter],
 s: [Getter],
 d: [Getter],
  ARROWS: { UP: 38, RIGHT: 39, DOWN: 40, LEFT: 37 } }

You can go to the /dist folder to see the result. You will see that the result is far from the original file, this is because we protected it through Jscrambler, but the result is still runnable.

This concludes the tutorial. Have fun using ES7!

OneAPM helps you easily identify the performance bottleneck of Node.js applications, and analyzes layer by layer through powerful Trace records until the line-level problem code is identified. It displays the system response speed from the user's perspective and counts user usage by region and browser.