Menggunakan ECMAScript 6

Saya sedang mencari cara untuk menjalankan kode ECMAScript 6 di konsol browser saya, tetapi sebagian besar browser tidak mendukung fungsi yang saya cari. Misalnya Firefox adalah satu-satunya browser yang mendukung fungsi panah.

Apakah ada cara (ekstensi, skrip pengguna, dll.) Saya dapat menjalankan fitur ini di Chrome?

Di Chrome, sebagian besar fitur ES6 disembunyikan di balik bendera yang disebut "Fitur JavaScript Eksperimental". Kunjungi chrome://flags/#enable-javascript-harmony, aktifkan bendera ini, mulai ulang Chrome dan Anda akan mendapatkan banyak fitur baru .

Fungsi panah belum diterapkan di V8 / Chrome , jadi tanda ini tidak akan "membuka" fungsi panah.

Karena fungsi panah adalah perubahan sintaks, tidak mungkin untuk mendukung sintaks ini tanpa mengubah cara JavaScript diuraikan. Jika Anda suka mengembangkan ES6, maka Anda dapat menulis kode ES6 dan menggunakan kompiler ES6-ke-ES5 untuk menghasilkan kode JavaScript yang kompatibel dengan semua browser (modern) yang ada.

Misalnya, lihat https://github.com/google/traceur-compiler . Pada saat penulisan, ini mendukung semua fitur sintaks baru ES6 . Bersama dengan bendera yang disebutkan di bagian atas jawaban ini, Anda akan sangat dekat dengan hasil yang diinginkan.

Jika Anda ingin menjalankan sintaks ES6 langsung dari konsol, maka Anda dapat mencoba untuk menimpa evaluator JavaScript konsol (sehingga preprocesor Traceur dijalankan sebelum menjalankan kode). Jika Anda ingin melakukan ini, lihat jawaban ini untuk mempelajari cara memodifikasi perilaku alat pengembang.

Babel adalah transpiler yang hebat untuk mencoba ES6. Anda dapat menjalankan ES6 di browser di bagian "Cobalah" di situs web mereka. Fungsinya mirip dengan jsfiddle.

Panah misalnya:

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

menampilkan hasilnya 2 .

Babel "transpiles", yaitu menerjemahkan ES6 ke javascript ES5 yang dapat dijalankan oleh teknologi browser saat ini. Anda dapat menginstal Babel melalui npm install -g babel. Setelah terinstal, Anda dapat menyimpan contoh panah di atas ke dalam file. Katakanlah kita memanggil file "ES6.js". Dengan asumsi Anda telah menginstal node kemudian pada baris perintah pipa output ke node:

babel ES6.js | node

Dan Anda akan melihat hasilnya 2. Anda dapat menyimpan file yang diterjemahkan secara permanen dengan perintah:

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

output.js "dipindahkan":

"use strict";

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

var result = add(1, 2);

console.log(result);

Yang tentu saja dapat dijalankan di browser modern apa pun.

Contoh menggunakan kelas

ES6 adalah target yang bergerak cepat. Lihat Tabel Kompatibilitas untuk menemukan fitur yang didukung oleh transponder seperti Traceur dan Babel dan dukungan browser. Anda bahkan dapat memperluas bagan untuk melihat tes yang digunakan untuk memverifikasi kompatibilitas:

Untuk mencoba tepi pendarahan ES6 di browser, cobalah Firefox night build atau saluran rilis Chrome

Anda mungkin mencari salah satu tautan berikut:

Babel ( untuk Webpack , untuk Gulp , untuk Grunt , untuk framework & bahasa lain )

Menggunakan Babel dalam pipeline pengembangan Anda akan secara otomatis mengubah (mengkonversi) JavaScript Anda menjadi kompatibel dengan browser. Atau, jika Anda menggunakan TypeScript, Anda bisa tenang; kode Anda sudah ditranskripsikan.

Tidak ingin mengatur transpiler (seperti Babel / Typescript), atau Anda ingin bermain dengan fitur yang belum didukung oleh transpiler Anda?

Anda dapat mengaktifkan fitur ECMAScript eksperimental di browser Anda dengan membuka chrome: // flags / # enable-javascript-harmoni dan mengaktifkan bendera JavaScript Harmony. Untuk beberapa fitur, Anda mungkin harus menggunakan Chrome Canary dengan mengaktifkan JavaScript Harmony flag.

API JavaScript baru biasanya tidak tercakup oleh Babel, dan akan memiliki bendera Chrome sendiri.

Menggunakan fungsi Panah

Pertanyaan ini secara khusus disebutkan menggunakan fungsi panah. Fungsi panah sekarang didukung secara native di semua browser kecuali IE dan Opera Mini. Lihat caniuse .

Dulu agak sulit jika Anda ingin bermain dengan fungsi panah. Sejarah di bawah ini menunjukkan apa yang diperlukan pada titik yang berbeda dalam waktu untuk bermain dengan fitur ini.

1) Pada awalnya, fungsi panah hanya berfungsi di Chrome Canary dengan chrome://flags/#enable-javascript-harmonybendera diaktifkan. Sepertinya fungsi ini setidaknya sebagian diimplementasikan oleh versi 39.

2) Kemudian, panah fungsi di mana tersedia di Google Chrome di belakang bendera JavaScript Harmony.

3) Dan akhirnya, di Google Chrome 45 , panah berfungsi jika diaktifkan secara default.

Anda dapat mengharapkan pola serupa terjadi dengan fitur-fitur ECMAScript baru lainnya.

Cukup gunakan penggunaan yang ketat mode , menjadi penutup (tidak diperlukan, tapi ini pendekatan hebat) dan Chrome akan dapat mengeksekusi kode Anda sebagai ES6 ...

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

Berikut ini sebuah contoh ... http://jsbin.com/tawubotama/edit?html,js,console,output mencoba menghapus penggunaan stric garis mode , dan coba lagi, kesalahan pada konsol akan dicatat.

Pada 2015 November, Firefox dan Edge telah memimpin balapan ES6, gunakan mereka jika Anda ingin bereksperimen dengan fungsi yang tidak dimiliki Chrome. Edge memiliki kelas / subkelas dan Firefox memiliki Proksi ; di antara mereka, Anda memiliki hampir semua fitur ES6 .

Jika Anda harus menggunakan ES6 di konsol Chrome, ada satu cara sederhana, dicoba dan benar:

Sabar.

Browser mengadopsi ES6 - bahkan Safari, yang telah menyeret kakinya di sebagian besar standar HTML5. Beri Google waktu dan mereka akan menerapkan fitur ES6 satu per satu. Misalnya fungsi panah sekarang tersedia, di saluran produksi dan tanpa bendera.

Jangan berharap ekstensi; Anda tidak dapat menerjemahkan ES6 ke ES5 baris demi baris, jadi kami tidak dapat memperpanjang konsol dengan Babel .

Memang benar bahwa ada percobaan js flag, tetapi ada karena alasan yang baik. V8 memiliki Proxy tetapi dalam sintaksis lama (non-standar) dan memiliki masalah keamanan . Perusakannya juga tidak lengkap: Anda akan menemukan bahwa dalam beberapa kasus berfungsi, dalam beberapa kasus tidak.

Jika Anda hanya ingin bermain ES6, cukup mainkan dengan Edge / Firefox. Keduanya mencakup hampir seluruh Babel, memiliki konsol dan debugger, dan memiliki fitur yang tidak dapat disediakan Babel.