Korzystanie z ECMAScript 6

Szukam sposobu na uruchomienie kodu ECMAScript 6 w konsoli mojej przeglądarki, ale większość przeglądarek nie obsługuje funkcji, których szukam. Na przykład Firefox jest jedyną przeglądarką obsługującą funkcje strzałek.

Czy istnieje sposób (rozszerzenie, skrypt użytkownika itp.) Na uruchomienie tych funkcji w przeglądarce Chrome?

W przeglądarce Chrome większość funkcji ES6 jest ukryta za flagą o nazwie „Eksperymentalne funkcje JavaScript”. Odwiedź chrome://flags/#enable-javascript-harmony, włącz tę flagę, uruchom ponownie Chrome, a otrzymasz wiele nowych funkcji .

Funkcje strzałek nie są jeszcze zaimplementowane w V8 / Chrome , więc ta flaga nie "odblokowuje" funkcji strzałek.

Ponieważ funkcje strzałkowe są zmianą składni, nie można obsługiwać tej składni bez zmiany sposobu analizowania JavaScript. Jeśli lubisz programować w ES6, możesz napisać kod ES6 i użyć kompilatora ES6-do-ES5 do wygenerowania kodu JavaScript, który jest kompatybilny ze wszystkimi istniejącymi (nowoczesnymi) przeglądarkami.

Na przykład zobacz https://github.com/google/traceur-compiler . W chwili pisania obsługuje wszystkie nowe funkcje składni ES6 . Wraz z flagą wymienioną na górze tej odpowiedzi, będziesz bardzo blisko pożądanego wyniku.

Jeśli chcesz uruchomić składnię ES6 bezpośrednio z konsoli, możesz spróbować nadpisać ewaluator JavaScript konsoli (tak, że preprocesor Traceur jest uruchamiany przed wykonaniem kodu). Jeśli masz ochotę to zrobić, spójrz na tę odpowiedź, aby dowiedzieć się, jak modyfikować zachowanie narzędzi programistycznych.

Babel to świetny transpiler do wypróbowania ES6. Możesz uruchomić ES6 w przeglądarce w sekcji „Wypróbuj” na ich stronie internetowej. Działa podobnie do jsfiddle.

Na przykład strzały:

let add = (x,y) => x + y;
let result = add(1,1);
console.log(result);

wyświetla wynik 2 .

Babel "transpiles", czyli tłumaczy ES6 na javascript ES5, który może być uruchomiony przez obecną technologię przeglądarki. Możesz zainstalować Babel przez npm install -g babel. Po zainstalowaniu możesz zapisać powyższy przykład strzałek do pliku. Powiedzmy, że nazywamy plik „ES6.js”. Zakładając, że masz zainstalowany węzeł, a następnie w potoku wiersza poleceń wyjście do węzła:

babel ES6.js | node

Zobaczysz wynik 2. Możesz zapisać przetłumaczony plik na stałe za pomocą polecenia:

babel ES6.js --out-file output.js

output.js "transpiled":

"use strict";

var add = function (x, y) {
  return x + y;
};

var result = add(1, 2);

console.log(result);

Które oczywiście można uruchomić w dowolnej nowoczesnej przeglądarce.

Przykład użycia klas

ES6 to szybko poruszający się cel. Zapoznaj się z tabelą zgodności, aby znaleźć funkcje obsługiwane przez transpilery, takie jak Traceur i Babel oraz obsługa przeglądarek. Możesz nawet rozszerzyć tabelę, aby zobaczyć test używany do weryfikacji zgodności:

Aby wypróbować bleeding edge ES6 w przeglądarce, wypróbuj kanały wersji Firefox Nightly Build lub Chrome

Prawdopodobnie szukasz jednego z poniższych linków:

Babel ( dla Webpack , dla Gulp , dla Grunt , dla innych frameworków i języków )

Używanie Babel w procesie tworzenia oprogramowania automatycznie transpile (konwertuje) JavaScript, aby był kompatybilny z różnymi przeglądarkami. Lub, jeśli używasz TypeScript, możesz spać spokojnie; Twój kod jest już transpilowany.

Nie chcesz konfigurować transpilera (takiego jak Babel / Typescript), czy chcesz bawić się funkcjami, które nie są jeszcze obsługiwane przez Twój transpiler?

Możesz włączyć eksperymentalne funkcje ECMAScript w swojej przeglądarce, przechodząc do chrome: // flags / # enable-javascript-harmony i włączając flagę JavaScript Harmony. W przypadku niektórych funkcji może być konieczne użycie przeglądarki Chrome Canary z włączoną flagą JavaScript Harmony.

Nowe interfejsy API JavaScript zwykle nie są objęte usługą Babel i będą miały własną flagę Chrome.

Korzystanie z funkcji strzałek

To pytanie konkretnie dotyczyło użycia funkcji strzałkowych. Funkcje strzałek są teraz natywnie obsługiwane we wszystkich przeglądarkach z wyjątkiem IE i Opera Mini. Zobacz caniuse .

Kiedyś było to trochę trudne, jeśli chciałeś bawić się funkcjami strzałek. Poniższa historia pokazuje, ile czasu zajęło korzystanie z tej funkcji w różnych momentach.

1) Początkowo funkcje strzałek działały tylko w Chrome Canary z chrome://flags/#enable-javascript-harmonywłączoną flagą. Wygląda na to, że ta funkcjonalność została przynajmniej częściowo zaimplementowana w wersji 39.

2) Następnie funkcje strzałek zostały udostępnione w Google Chrome za flagą JavaScript Harmony.

3) I wreszcie w Google Chrome 45 funkcje strzałek są domyślnie włączone.

Możesz spodziewać się podobnego wzorca w przypadku innych nowych funkcji ECMAScript.

Po prostu użyj trybu ścisłego do zamknięcia (niepotrzebne, ale to świetne podejście), a Chrome będzie mógł wykonać twój kod jako ES6 ...

(function(){
  'use strict';
  //your ES6 code...
})();

Oto przykład ... http://jsbin.com/tawubotama/edit?html,js,console,output spróbuj usunąć linię trybu ścisłego i spróbuj ponownie, zostanie zarejestrowany błąd na konsoli.

Od listopada 2015 r. Firefox i Edge prowadzą wyścigi ES6, używaj ich, jeśli chcesz eksperymentować z funkcjami, których brakuje Chrome. Edge ma klasę / podklasę, a Firefox ma Proxy ; między nimi masz praktycznie wszystkie funkcje ES6 .

Jeśli musisz używać ES6 w konsoli Chrome, jest jeden prosty, wypróbowany i prawdziwy sposób:

Bądź cierpliwy.

Przeglądarki przyjmują ES6 - a nawet Safari, który ociąga się z większością standardów HTML5. Daj Google czas, a po kolei wdrożą funkcje ES6. Na przykład funkcje strzałek są teraz dostępne w kanale produkcyjnym i bez flagi.

Nie oczekuj rozszerzeń; nie można przetłumaczyć ES6 na ES5 linia po linii, więc nie możemy po prostu rozszerzyć konsoli o Babel .

Prawdą jest, że istnieje flaga js eksperymentu, ale nie bez powodu. V8 ma Proxy, ale w starej (niestandardowej) składni i ma problem z bezpieczeństwem . Jego destrukturyzacja jest również niekompletna: przekonasz się, że w niektórych przypadkach działa, w niektórych przypadkach nie.

Jeśli chcesz tylko zagrać w ES6, po prostu zagraj w Edge / Firefox. Obaj obejmują prawie cały Babel, mają konsolę i debugger oraz mają funkcje, których Babel nie może zapewnić.