JavaScript
Transpiling

Wprowadzenie

Uwagi

Wprowadzenie do transpozycji

Przykłady

ES6 / ES2015 do ES5 (przez Babel ) :

Ta składnia ES2015

// ES2015 arrow function syntax 
[1,2,3].map(n => n + 1); 

jest interpretowany i tłumaczony na tę składnię ES5:

// Conventional ES5 anonymous function syntax 
[1,2,3].map(function(n) {   
    return n + 1; 
});

CoffeeScript na JavaScript (poprzez wbudowany kompilator CoffeeScript) :

Ten CoffeeScript

# Existence:
alert "I knew it!" if elvis?

jest interpretowane i tłumaczone na JavaScript:

if (typeof elvis !== "undefined" && elvis !== null) {
  alert("I knew it!");
}

Jak dokonać transpozycji?

Większość języków kompilacji do Javascript ma wbudowany transpiler (jak w CoffeeScript lub TypeScript). W takim przypadku może być konieczne włączenie transpilatora języka za pomocą ustawień konfiguracji lub pola wyboru. Ustawienia zaawansowane można również ustawić w odniesieniu do transpilatora.

W transponowaniu ES6 / ES2016-na-ES5 najbardziej popularnym transpilatorem jest Babel .

Dlaczego powinienem dokonać transpozycji?

Najczęściej cytowane korzyści to:

• Możliwość niezawodnego korzystania z nowszej składni
• Kompatybilność z większością, jeśli nie wszystkimi przeglądarkami
• Wykorzystanie brakujących / jeszcze nie macierzystych funkcji w Javascript za pomocą języków takich jak CoffeeScript lub TypeScript

Zacznij używać ES6 / 7 z Babel

Obsługa przeglądarki ES6 rośnie, ale aby mieć pewność, że Twój kod będzie działał w środowiskach, które go w pełni nie obsługują, możesz użyć Babel , transpilatora ES6 / 7 do ES5, wypróbuj!

Jeśli chcesz używać ES6 / 7 w swoich projektach bez martwienia się o kompatybilność, możesz użyć interfejsu Node i Babel CLI

Szybka konfiguracja projektu z obsługą Babel dla ES6 / 7

1. Pobierz i zainstaluj Węzeł
2. Przejdź do folderu i utwórz projekt za pomocą swojego ulubionego narzędzia wiersza poleceń

~ npm init

3. Zainstaluj Babel CLI

~ npm install --save-dev babel-cli
~ npm install --save-dev babel-preset-es2015

4. Utwórz folder scripts do przechowywania plików .js , a następnie folder dist/scripts którym zostaną zapisane w pełni kompatybilne pliki.
5. Utwórz plik .babelrc w folderze głównym swojego projektu i zapisz go na nim

{
    "presets": ["es2015"]
}

6. Zmodyfikuj plik package.json (utworzony po uruchomieniu npm init ) i dodaj skrypt build do właściwości scripts :

{
    ...
    "scripts": {
    ... ,
    "build": "babel scripts --out-dir dist/scripts"
    },
    ...
}

7. Miłego programowania w ES6 / 7
8. Wykonaj następujące czynności, aby przełożyć wszystkie pliki na ES5

~ npm run build

W przypadku bardziej złożonych projektów warto przyjrzeć się Gulp lub Webpack