Traceur ES6 Module Export Feature -Tutorial Savvy

ES6 provides the feature of exporting and importing module in JavaScript Programming Language.
A object can be exported using export keyword and the same object can be imported using import..from clause.
In this demo, “We will learn about ES6 export and import of module”.
For this demo purpose i have created a project name ES6ModuleExportDemo with traceur-runtime installed using Bower.You can check one of my previous post to learn installing traceur-runtime in project.
Below screenshot shows the ES6ModuleExportDemo project structure containing bower_components,dev and out directories and a demo.html file for rendering output in browser.

The dev directory contains number-util-script.js and app.js with ES6 module export and import code.
The number-util-script.js file contains the code for exporting a object named NumberUtil.This NumberUtil object contains a method named getSquareOfNumber().This method takes a number as input parameter and returns the square of number.The code for dev/number-util-script.js is as follows.

export var NumberUtil ={
    getSquareOfNumber: function(number){
        return number*number;
    }
};

The app.js file contains the code for importing NumberUtil object from number-util-script.js.After importing NumberUtil object the getSquareNumber() method is called with input parameter 5.The code for dev/app.js is as follows.

import {NumberUtil} from './number-util-script.js';

var result = NumberUtil.getSquareOfNumber(5);

document.getElementById("result").innerText ="Result: "+result;

Traceur compiler now can be called to converts the ES6 code to corresponding JavaScript code.The converted code are present inside out directory.The following screenshot shows the terminal Traceur compile command to generate the converted script in out directory.

The updated project structure for ES6ModuleExportDemo looks like below screenshot.

The compiled JavaScript code are present inside out/number-util-script.js and are as follows.

System.registerModule("../dev/number-util-script.js", [], function() {
  "use strict";
  var __moduleName = "../dev/number-util-script.js";
  var NumberUtil = {getSquareOfNumber: function(number) {
      return number * number;
    }};
  return {get NumberUtil() {
      return NumberUtil;
    }};
});
System.get("../dev/number-util-script.js" + '');

The compiled JavaScript code are present inside out/app.js and are as follows.The generated app.js file contains the combined code of NumberUtil Module definition from number-util-script.js file and its own import code.

System.registerModule("../dev/number-util-script.js", [], function() {
  "use strict";
  var __moduleName = "../dev/number-util-script.js";
  var NumberUtil = {getSquareOfNumber: function(number) {
      return number * number;
    }};
  return {get NumberUtil() {
      return NumberUtil;
    }};
});
System.registerModule("../dev/app.js", [], function() {
  "use strict";
  var __moduleName = "../dev/app.js";
  var NumberUtil = System.get("../dev/number-util-script.js").NumberUtil;
  var result = NumberUtil.getSquareOfNumber(5);
  document.getElementById("result").innerText = "Result: " + result;
  return {};
});
System.get("../dev/app.js" + '');

The demo.html file includes the Traceur runtime and out/app.js file.The following code shows the content of demo.html file.

<!DOCTYPE html>
<html>
<head lang="en">
    <title>ES6 Module Export Demo</title>
    <script src="bower_components/traceur-runtime/traceur-runtime.min.js">
    </script>
</head>
<body>
    <h1 id="result"></h1>
    <script src="out/app.js"></script>
</body>
</html>

The output of the demo.html is shown in following screenshot with result 25 printed on the browser.

You can download the demo code from the following link:-

demo download link

Traceur ES6 Module Export Feature

Related

Sandeep