Getting started with Traceur
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
Configure
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">
<head>
<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>
</head>
<body>
<script src="node_modules/traceur/bin/traceur-runtime.js"></script>
<script src="dist/index.js"></script>
</body>
</html>
Run Traceur
Run command:
npm run build
Load webpage
Open index.html
and see output
Debug
Open debugger (Ctrl-Shift-I in Chrome) and navigate to source code, inspect output