Wprowadzenie do narzędzia Traceur

> Dodaj do ulubionych

Jak wypróbować Traceur

Traceur to kompilator, który pobiera kod w języku ECMAScript 6 (ES6) (zawierający klasy, generatory, konstrukcje destrukturyzujące itd.) i kompiluje go do postaci zwykłego JavaScriptu (ECMAScript 5 [ES5]) rozpoznawanego przez praktycznie wszystkie przeglądarki internetowe.

Narzędzie to można wypróbować na kilka sposobów:

  • Wpisując lub wklejając kod ES6 na stronie Read-eval-print-loop.
  • Dołączając Traceur do strony internetowej i kompilując skrypt ES6 w locie (metoda opisana poniżej).
  • Wykorzystując node do kompilacji kodu ES6 na ES5 za pomocą wiersza poleceń (metoda opisana jeszcze niżej) i dołączając wynik do stron internetowych lub wykonując go w node.

Samo narzędzie Traceur jest napisane w języku ES6 ES6, a następnie skompilowane do postaci ES5. Jeśli zajrzysz do kodu źródłowego Traceur, to zobaczysz, jak radykalnie w ES6 zmienił się sposób pisania kodu JavaScript.

Witaj, świecie!

W ramach przykładu utworzymy prostą stronę internetową zawierającą fragment kodu Traceur. Kod ten zostanie wykonany podczas jej ładowania w przeglądarce, czego efektem będzie pojawienie się na stronie napisu Witaj, świecie.

Zaczniemy od zdefiniowania szkieletu strony:

<!DOCTYPE html>
<html> 
  <head>
    <title>Witaj, świecie!</title>
    <meta charset="utf-8">
  </head> 
  <body>
    <h1 id="message"></h1>
  </body> 
</html>

Nasza klasa

Chcemy sprawić, aby podczas ładowania strony w elemencie h1 pojawiała się wygenerowana przez nas treść. Zrealizujemy ten pomysł przy użyciu odrobiny kodu ES6:

<!DOCTYPE html>
<html>
  ...
  <body>
    <h1 id="message"></h1>
    <script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
    <script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
    <script type="module">
      class Greeter {
        constructor(message) {
          this.message = message;
        }

        greet() {
          var element = document.querySelector('#message');
          element.innerHTML = this.message;
        }
      };

      var greeter = new Greeter('Witaj, świecie!');
      greeter.greet();
    </script>
    ...
  </body>
</html>

Pierwszy z dołączonych plików to kompilator Traceur. Po nim dodaliśmy jeszcze niewielki plik JS uruchamiający ten kompilator na stronie. W trzecim elemencie script zdefiniowaliśmy klasę za pomocą składni ES6, której w poprzednich wersjach ECMAscriptu nie ma. Zwróć też uwagę, że skrypt ten jest typu module, a nie jak zwykłe skrypty text/javascript — stanowi to dla skryptu bootstrap.js wskazówkę, jak skompilować kod źródłowy ES6 na ES5 i wstawić ten kod ES5 z powrotem na stronę. Podczas gdy strona jest ładowana, skrypt znajduje wszystkie znaczniki <script type="module">, kompiluje zawartość tych elementów na zwykły JavaScript, a następnie przekazuje go przeglądarce do wykonania.

Próba (budowa Traceur)

Aby nasz przykład zadziałał lokalnie, musimy zbudować bin/traceur.js. Gdy sklonujesz repozytorium z jego katalogu:

  1. npm install
  2. make

…powinieneś otrzymać u siebie katalog bin ze znajdującym się w nim plikiem traceur.js. Sprawdź czy to działa, otwierając stronę example/hello.html w przeglądarce internetowej i uruchamiając zestaw testów za pomocą polecenia make test.

Zastosowanie techniki na stronach internetowych

W przedstawionym przykładzie wykorzystujemy skrypty traceur.js i bootstrap.js prosto z repozytorium. Wprawdzie tak też można, ale czasami lepszym rozwiązaniem jest pobranie tych plików na własny serwer. Jeśli chcesz robić coś więcej niż tylko wypróbowywać skrypty demonstracyjne, możesz zastosować technikę kompilacji wielu skryptów ES6 do postaci ES5 za pomocą narzędzia wiersza poleceń i dołączać wynik tych działań do swoich stron.

Kompilowanie skryptów za pomocą narzędzia wiersza poleceń

Zastanawiasz się, jak za pomocą Traceur kompilować pliki JavaScript korzystając z narzędzia wiersza poleceń? Czytaj więc dalej.

Traceur zawiera skrypt powłoki o nazwie traceur służący do kompilowania kodu JavaScript zawierającego elementy ES6 i eksperymentalne składniki Traceur do postaci zwykłego ES5. Aby móc wykorzystać wygenerowany plik, musisz dołączyć plik wykonawczy (bin/traceur-runtime.js). Zawiera on wypełniacze i funkcje pomocnicze redukujące objętość wygenerowanego kodu.

Kompilowanie plików

Najpierw zainstaluj Node. Następnie utwórz plik JavaScript i użyj w nich jakichś nowości ES6. Na przykład:

// greeter.js
class Greeter {
  sayHi(name = 'Marilyn Manson') {
    console.log(`Cześć, ${name}!`);
  }
}

var greeter = new Greeter();
greeter.sayHi();

Uruchom kompilator w następujący sposób:


  $ ./traceur --out out/greeter.js --script greeter.js

Zostanie utworzony katalog out/ zawierający plik greeter.js, w którym wszystkie składniki charakterystyczne dla ES6 będą skompilowane do postaci zwykłego JavaScriptu ES5.

Pliki przekazywane do kompilatora wiersza poleceń są standardowo traktowane jako moduły anonimowe, więc trafiają do opakowania. Jeśli wolisz traktować je jako skrypty (kod globalny), użyj flag wiersza poleceń --script <nazwapliku>.

Sposób użycia skompilowanych plików

Do przetestowania skompilowanego przed chwilą pliku greeter.js wystarczy prosta strona HTML:

<html>
  <head>
    <script src="bin/traceur-runtime.js"></script>
    <script src="out/greeter.js"></script>
  </head>
  <body>
  W konsoli powinien pojawić się napis „Cześć, Marilyn Manson!”.
  </body>
</html>

Autor: Google

Źródło: https://github.com/google/traceur-compiler/wiki/Getting-Started

Tłumaczenie: Łukasz Piwko

Treść tej strony jest dostępna na zasadach licencji CC BY-SA 3.0