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

鈥owiniene艣 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 鈥濩ze艣膰, 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