ES6 - Modules

Consider a scenario where parts of JavaScript code need to be reused. ES6 comes to your rescue with the concept of Modules.
A module is nothing more than a chunk of JavaScript code written in a file. The functions or variables in a module are not available for use, unless the module file exports them.

In simpler terms, the modules help you to write the code in your module and expose only those parts of the code that should be accessed by other parts of your code.
ES6 modules will have to be transpiled to ES5 code so that we can run and test the code. Transpilation is the process of converting code from one language into its counterpart equivalent. The ES6 Module Transpiler is a tool that takes your ES6 module and compiles it into ES5 compatible code in the CommonJS or AMD style.
ES6 modules is a very powerful concept. Although support is not available everywhere yet, you can play with ES6 code today and transpile into ES5. You can use Grunt, Gulp, Babel or some other transpiler to compile the modules during a build process. For the purpose of demonstration, the lesson uses Node.js to transpile and execute the code as it is console based and easy to understand.

Exporting a Module

To make available certain parts of the module, use the export keyword. Following is the syntax to export a module.

Export a single value or element - Use export default

export default element_name

Export multiple values or elements

export {element_name1,element_name2,....}

Importing a Module

To be able to consume a module, use the import keyword. Following is the syntax for the same.

Import a single value or element

import element name from module_name

Export multiple values or elements

import {element_name1,element_name2,....} from module_name

Consider a JavaScript file, Message.js, with a method printMsg() in it. To be able to reuse the functionality provided by this method, include the following in the Message.js file −

exportdefault printMsg

The script file that intends to consume the function, say User.js, will have to import the function from the Message module by including the following −

import printMsg from './Message.js'

Note − Note: Multiple elements in the export statement should be delimited by a comma separator. The same holds true for the import.

Example: Defining and Using ES6 modules

Defining a module: Message_module.js

function display_message() { 
   console.log("Hello World") 
} 
export default display_message

Importing the module: consume_module.js

import display_message from './MessageModule.js' 
display_message() 

Install the es6-module-transpiler via npmusing the following command −

npm install -g es6-module-transpiler

Assume the directory structure of the given JS project as below −

D:/ 
ES6/ 
   scripts/ 
      app.js 
      utility.js 
   out/

where, scripts is the directory containing my ES6 code samples. We shall transpile the ES6 code into ES5 and save them to the directory shown above.
Following are the steps for the same −
Step 1 − Navigate to the D:/ ES6/scripts directory and transpile the ES6 code into CommonJS format. You may also choose to transpile into the AMD Format and then use a browser to run the same.
Type the following in the node window to transpile the code into CommonJS format −

compile-modules convert -I scripts -o out Message_module.js 
   consume_module.js -format commonjs

The above command will transpile all JS files in the script directory and place their transpiled versions into the out subdirectory.
Step 2 − Execute the script code.

cd out 
node consume_module.js 

Following will be the output of the above code.

Hello World

Note − A module can also be re-exported, i.e. the code that imports a module can also export it.