ECMAScript 6'yı kullanma

ECMAScript 6 kodunu tarayıcımın konsolunda çalıştırmanın bir yolunu arıyorum, ancak çoğu tarayıcı aradığım işlevselliği desteklemiyor. Örneğin, Firefox ok işlevlerini destekleyen tek tarayıcıdır.

Bu özellikleri Chrome'da çalıştırabilmemin bir yolu (uzantı, kullanıcı metni vb.) Var mı?

Chrome'da, ES6 özelliklerinin çoğu "Deneysel JavaScript özellikleri" adlı bir bayrağın arkasında gizlidir. Ziyaret edin chrome://flags/#enable-javascript-harmony, bu bayrağı etkinleştirin, Chrome'u yeniden başlatın ve birçok yeni özellik elde edeceksiniz .

Ok işlevleri henüz V8 / Chrome'da uygulanmadığından , bu işaret ok işlevlerinin kilidini açmaz.

Ok işlevleri bir sözdizimi değişikliği olduğundan, JavaScript'in ayrıştırma şeklini değiştirmeden bu sözdizimini desteklemek mümkün değildir. ES6'da geliştirmeyi seviyorsanız, ES6 kodu yazabilir ve mevcut tüm (modern) tarayıcılarla uyumlu JavaScript kodu oluşturmak için bir ES6-ES5 derleyicisi kullanabilirsiniz.

Örneğin, bkz. Https://github.com/google/traceur-compiler . Yazma itibariyle , ES6'nın tüm yeni sözdizimi özelliklerini destekler . Bu cevabın üst kısmında belirtilen bayrakla birlikte, istenen sonuca çok yakın olacaksınız.

ES6 sözdizimini doğrudan konsoldan çalıştırmak istiyorsanız, konsolun JavaScript değerlendiricisinin üzerine yazmayı deneyebilirsiniz (böylece kodu çalıştırmadan önce Traceur ön işlemcisi çalıştırılır). Bunu yapmaktan hoşlanıyorsanız , geliştirici araçlarının davranışını nasıl değiştireceğinizi öğrenmek için bu cevaba göz atın .

Babil , ES6'yı denemek için harika bir transpiler. ES6'yı web sitelerinin "Deneyin" bölümünde tarayıcıda çalıştırabilirsiniz. Jsfiddle'a benzer şekilde çalışır.

Örneğin oklar:

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

sonucu görüntüler 2 .

Babil "transpiles", yani ES6'yı mevcut tarayıcı teknolojisi ile çalıştırılabilen ES5 javascript'e çevirir. Babel'i kurabilirsiniz npm install -g babel. Kurulduktan sonra, yukarıdaki ok örneğini bir dosyaya kaydedebilirsiniz. Diyelim ki "ES6.js" dosyasını çağırıyoruz. Düğümün kurulu olduğunu varsayarsak, komut satırında çıkışı düğüme bağlar:

babel ES6.js | node

Ve çıktıyı göreceksiniz 2. Çevrilen dosyayı şu komutla kalıcı olarak kaydedebilirsiniz:

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

output.js "aktarıldı":

"use strict";

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

var result = add(1, 2);

console.log(result);

Tabii ki herhangi bir modern tarayıcıda çalıştırılabilir.

Sınıfları kullanma örneği

ES6 hızlı hareket eden bir hedeftir. Traceur ve Babel gibi aktarıcılar tarafından desteklenen özellikleri ve tarayıcı desteği bulmak için Uyumluluk Tablosuna bakın . Hatta uyumluluğu doğrulamak için kullanılan testi görmek için grafiği genişletebilirsiniz:

Bir tarayıcıda kenar ES6'yı denemek için Firefox'un gece derlemesini veya Chrome yayın kanallarını deneyin

Muhtemelen aşağıdaki bağlantılardan birini arıyorsunuz:

Babel ( WebPack için , Gulp için , Grunt için , diğer çerçeveler ve diller için )

Geliştirme kanalınızda Babel'i kullanmak JavaScript'inizi tarayıcılar arası uyumlu olacak şekilde otomatik olarak aktarır (dönüştürür). Veya TypeScript kullanıyorsanız, rahatlayabilirsiniz; kodunuz zaten aktarılıyor.

Bir aktarıcı kurmak istemiyor musunuz (Babel / Typescript gibi) veya aktarıcı tarafından henüz desteklenmeyen özelliklerle oynamak ister misiniz?

Chrome: // flags / # enable-javascript-harmony adresine gidip JavaScript Uyum bayrağını etkinleştirerek tarayıcınızda deneysel ECMAScript özelliklerini etkinleştirebilirsiniz . Bazı özellikler için, JavaScript Uyum işareti etkinken Chrome Canary'yi kullanmanız gerekebilir .

Yeni JavaScript API'leri genellikle Babel tarafından kapsanmaz ve kendi Chrome bayrağına sahiptir.

Ok işlevlerini kullanma

Bu soru özellikle ok işlevleri kullanılarak belirtilmiştir. Ok işlevleri artık IE ve Opera Mini hariç tüm tarayıcılarda yerel olarak desteklenmektedir. Bkz . .

Ok fonksiyonları ile oynamak istersen biraz zor olurdu. Aşağıdaki tarih, bu özellik ile oynamak için farklı noktalarda nelerin zaman aldığını göstermektedir.

1) İlk başta, sadece çalışmış fonksiyonları ok Chrome Canary'nin ile chrome://flags/#enable-javascript-harmonybayrak sağladı. Bu işlevin en azından kısmen uygulandığı anlaşılıyor 39 sürümü tarafından .

2) Ardından, Google Chrome'da kullanıma sunulduğunda ok işlevleri JavaScript Uyum bayrağının arkasında .

3) Ve son olarak, Google Chrome 45'te , varsayılan olarak etkin olduğunda ok işlevleri.

Benzer modelin diğer yeni ECMAScript özellikleriyle olmasını bekleyebilirsiniz.

Sadece kullanmak Kullanım sıkı bir kapatma içine, modu (değil gerekli, ama büyük bir yaklaşımdır) ve Chrome ES6 olarak kod çalıştırmak mümkün olacak ...

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

Burada bir örnek ... http://jsbin.com/tawubotama/edit?html,js,console,output kullanım stric mode satırını kaldırmayı deneyin ve tekrar deneyin, konsoldaki bir hata kaydedilecektir.

2015 Kasım itibariyle, Firefox ve Edge ES6 yarışlarına liderlik ediyor, Chrome'un eksik olduğu işlevleri denemek istiyorsanız bunları kullanın. Edge'de sınıf / alt sınıf ve Firefox'ta Proxy ; aralarında neredeyse tüm ES6 özellikleri var .

Chrome konsolunda ES6 kullanmanız gerekiyorsa, basit, denenmiş ve doğru bir yol vardır:

Sabırlı ol.

Tarayıcılar, çoğu HTML5 standardında ayağını sürükleyen ES6'yı bile kullanıyor. Google'a zaman tanıyın ve ES6 özelliklerini tek tek uygulayacaklar. Örneğin, üretim kanalında ve bayraksız ok işlevleri artık kullanılabilir.

Uzantı beklemeyin; ES6'yı ES5'e satır satır çeviremezsiniz, bu yüzden sadece Babel ile konsolu genişletemeyiz .

Bir deney js bayrağı olduğu doğrudur, ancak iyi nedenlerle mevcuttur. V8'de Proxy var ancak eski (standart dışı) sözdiziminde ve güvenlik sorunu var . Yıkımı da eksik: bazı durumlarda işe yaradığını, bazı durumlarda işe yaramadığını göreceksiniz.

Sadece ES6 oynamak istiyorsanız, Edge / Firefox ile oynayın. Her ikisi de neredeyse tüm Babil'i kapsar, konsol ve hata ayıklayıcıya sahiptir ve Babel'in sağlayamadığı özelliklere sahiptir.