Traceur.js, pour commencer à jouer avec ECMAScript 6.0

Pourquoi s'intéresser à ECMAScript 6.0 ? Si vous êtes un développeur JavaScript la question ne se pose pas : la plupart des moteurs JavaScript de vos navigateurs préférés supporteront cette version. Si vous êtes un développeur AngularJS, ce sera, courant 2015, une nécessité pour prendre en main plus facilement la version 2 d'AngularJS.

Pour s'attaquer à des nouvelles versions de langages au moment de leur sortie, et mieux encore, un peu avant (un commercial vous a sans doute déjà fait le coup de chercher un développeur ayant 1 an d'expérience sur une techno de 6 mois ...), il faut avoir sous la main un transpiler. Le rôle du transpiler est de compiler un langage dans un autre langage. Dans notre cas, d'ECMAScript 6.0 vers ECMAScript 5.0. C'est ce que permet de faire traceur.js.

Importer traceur.js peut avantageusement s'accompagner d'une propriété, dans le 'head' de votre page, spécifiant que vous souhaitez utiliser des options expérimentales.

Enfin, votre code ES 6 se positionnera dans une balise 'script' ayant pour attribut 'type="module"'. En résumé, cela donne :

<html>

  <head>
    <script data-require="traceur@*" data-semver="0.0.0-20140302" src="https://traceur-compiler.googlecode.com/git/bin/traceur.js"></script>
    <script>traceur.options.experimental = true</script>
    <script data-require="traceur@*" data-semver="0.0.0-20140302" src="https://traceur-compiler.googlecode.com/git/src/bootstrap.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Salut</h1>
    <script type="module">

    </script>
  </body>

</html>  

J'ai obtenu ce template en ajoutant 'traceur' à un nouveau plunkr.
Et voilà, bienvenue dans le futur de JavaScript.