Install Traceur

Make sure you have node.js installed and npm updated.

Create package.json file:

npm init -y

Install Traceur with the following command:

npm i --save-dev traceur


Add traceur to scripts section of package.json:

traceur --script src/index.js --out dist/index.js --outputLanguage es5 --source-maps file --source-root true 

Create html and js

Create src folder for source files and dist for transpiled output.

Create file src/index.js written in ES2015:

const greetings = `Hello World!`;
document.body.innerHTML += greetings;

Create index.html:

<!doctype html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tracuer Sample</title>
    <script src="node_modules/traceur/bin/traceur-runtime.js"></script>
    <script src="dist/index.js"></script>

Run Traceur

Run command:

npm run build

Load webpage

Open index.html and see output


Open debugger (Ctrl-Shift-I in Chrome) and navigate to source code, inspect output