ECMAScript 6 का उपयोग करना

Question

मैं अपने ब्राउज़र के कंसोल में ECMAScript 6 कोड को चलाने का तरीका ढूंढ रहा हूं, लेकिन अधिकांश ब्राउज़र उस कार्यक्षमता का समर्थन नहीं करते हैं जिसकी मुझे तलाश है। उदाहरण के लिए फ़ायरफ़ॉक्स एकमात्र ब्राउज़र है जो एरो फ़ंक्शंस का समर्थन करता है।

क्या कोई तरीका है (एक्सटेंशन, यूजरस्क्रिप्ट, आदि) मैं क्रोम पर इन सुविधाओं को चला सकता हूं?

Answer 1

क्रोम में, "एक्सपेरिमेंटल जावास्क्रिप्ट फीचर्स" नामक एक ध्वज के पीछे ईएस 6 की अधिकांश विशेषताएं छिपी हुई हैं। यात्रा करें chrome://flags/#enable-javascript-harmony, इस ध्वज को सक्षम करें, Chrome को पुनरारंभ करें और आपको कई नई सुविधाएँ मिलेंगी ।

तीर फ़ंक्शन अभी तक V8 / Chrome में लागू नहीं किए गए हैं , इसलिए यह ध्वज तीर फ़ंक्शन को "अनलॉक" नहीं करेगा।

चूंकि तीर फ़ंक्शन एक सिंटैक्स परिवर्तन हैं, इसलिए जावास्क्रिप्ट को पार्स करने के तरीके को बदलने के बिना इस सिंटैक्स का समर्थन करना संभव नहीं है। यदि आप ईएस 6 में विकास करना पसंद करते हैं, तो आप ईएस 6 कोड लिख सकते हैं और जावास्क्रिप्ट कोड उत्पन्न करने के लिए ईएस 6-टू-ईएस 5 कंपाइलर का उपयोग कर सकते हैं जो सभी मौजूदा (आधुनिक) ब्राउज़रों के साथ संगत है।

उदाहरण के लिए, https://github.com/google/traceur-compiler देखें । लेखन के रूप में, यह ES6 के सभी नए वाक्यविन्यास सुविधाओं का समर्थन करता है । इस उत्तर के शीर्ष पर उल्लिखित ध्वज के साथ, आप वांछित परिणाम के बहुत करीब पहुंच जाएंगे।

यदि आप कंसोल से सीधे ES6 सिंटैक्स चलाना चाहते हैं, तो आप कंसोल के जावास्क्रिप्ट मूल्यांकनकर्ता को अधिलेखित करने का प्रयास कर सकते हैं (जैसे कि कोड को निष्पादित करने से पहले ट्रेसुर प्रीप्रोसेसर चलाया जाता है)। यदि आप ऐसा कर रहे हैं, तो इस उत्तर पर एक नज़र डालें कि कैसे डेवलपर टूल के व्यवहार को संशोधित किया जाए।

Comments

Chrome के लिए एक उपकरण, ScratchJS भी है: chrome.google.com/webstore/detail/scratch-js/…

— पिक्सेल 67

एरो फ़ंक्शंस को क्रोम के नवीनतम संस्करण में अब पूरी तरह से लागू किया गया है। यह टिप हालांकि अन्य ES6 सुविधाओं के लिए उपयोगी बनी हुई है। classउदाहरण के लिए, वाक्यविन्यास की तरह ।

— एडम ब्राउन

यह उत्तर अब ज्यादातर पुराना हो चुका है।

— माइकल पेर्लाकोव्स्की

@ गोथो वास्तव में पुरानी हैं (तीर फ़ंक्शन इन दिनों अच्छी तरह से समर्थित हैं), लेकिन प्रयोगात्मक जेएस कार्यों को सक्षम करने के लिए सामान्य सलाह अभी भी सच है। उदाहरण के लिए, नियमित अभिव्यक्ति में लुक-बिहाइंड अभी भी डिफ़ॉल्ट रूप से अक्षम हैं। यदि --enable-javascript-harmonyध्वज सेट किया गया है तो निम्न गलत आएगा : /(?<!a)b/.test('ab')और यदि ध्वज सेट नहीं है तो अगली त्रुटि को फेंक दें: "अनंतिम वाक्य रचना: अमान्य नियमित अभिव्यक्ति: / (! <! A) b /: अमान्य समूह")

— Rob

यह पुराना नहीं है, विंडोज़ के पुराने संस्करण वाले क्लाइंट के लिए arrow_functions के साथ समान समस्या थी । झंडे ने किया चाल, धन्यवाद!

— Jaime Yule

Answer 2

ईएस 6 को आज़माने के लिए बैबल एक महान ट्रांसपिलर है। आप अपनी वेबसाइट के "इसे आज़माएं" अनुभाग में ब्राउज़र में ईएस 6 चला सकते हैं। यह jsfiddle के समान कार्य करता है।

उदाहरण के लिए तीर:

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

परिणाम प्रदर्शित करता है 2 ।

बैबेल "ट्रांसपाइल्स", जो ईएस 6 का ईएस 5 जावास्क्रिप्ट में अनुवाद है जिसे वर्तमान ब्राउज़र तकनीक द्वारा चलाया जा सकता है। आप के माध्यम से कोलाहल स्थापित कर सकते हैं npm install -g babel। एक बार स्थापित होने के बाद, आप ऊपर दिए गए तीर के उदाहरण को एक फ़ाइल में सहेज सकते हैं। मान लें कि हम फ़ाइल को "ES6.js" कहते हैं। मान लें कि आपने नोड स्थापित किया है तो कमांड लाइन पर आउटपुट को नोड में पाइप करें:

babel ES6.js | node

और आपको आउटपुट दिखाई देगा 2। आप अनुवादित फ़ाइल को स्थायी रूप से कमांड के साथ सहेज सकते हैं:

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

"ट्रांसप्लड"

"use strict";

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

var result = add(1, 2);

console.log(result);

किसी भी आधुनिक ब्राउज़र में कौन सा कोर्स चलाया जा सकता है।

कक्षाओं का उपयोग करके उदाहरण

ईएस 6 तेजी से आगे बढ़ने वाला लक्ष्य है। ट्रैसुरल और बैबेल और ब्राउज़र समर्थन जैसे ट्रांसपैरर्स द्वारा समर्थित सुविधाओं को खोजने के लिए संगतता तालिका का संदर्भ लें । संगतता को सत्यापित करने के लिए उपयोग किए गए परीक्षण को देखने के लिए आप चार्ट का विस्तार भी कर सकते हैं:

एक ब्राउज़र में खून बह रहा बढ़त ES6 बाहर की कोशिश करने के लिए फ़ायरफ़ॉक्स रात का निर्माण या क्रोम रिलीज चैनलों का प्रयास करें

Comments

यदि आपने पहले से ही इसके बारे में नहीं सुना है, तो चेकआउट jspm। यह आपको कॉमनजस, एएमडी और ईएस 6 मॉड्यूल का उपभोग करने की अनुमति देता है। यह ट्रेसुर या बैबेल पर निर्भर करता है कि निष्पादन से पहले ब्राउज़र में ईएस 6 को ईएस 6 को "संकलित" किया जाए। जेएसपीएम के अच्छे लाभों में से एक जीपीएम से एनपीएम मॉड्यूल या (थोड़ा कॉन्फ़िगरेशन के साथ) मॉड्यूल का उपभोग करने की क्षमता है। भविष्य में अन्य मॉड्यूल रिपॉजिटरी को जोड़े जाने की संभावना है। jspm में भी बहुत अच्छा ब्राउज़र समर्थन है। परीक्षण नहीं किया गया है, लेकिन मेरा मानना ​​है कि यह IE9 + है। (आपका ईएस 6 कंपाइलर भी इसे प्रभावित करता है।)

— केविन पासे

उबंटू 17.04 में, मैं क्या करने की जरूरत sudo npm install -g --save-dev babel-cli babel-preset-es2015है और $(npm bin)/babel ES6.js --presets es2015यह काम करने के लिए, आरएफ babeljs.io/docs/plugins/preset-es2015

— फल

Answer 3

आप शायद निम्नलिखित में से किसी एक लिंक की तलाश कर रहे हैं:

बैबेल ( वेबपैक के लिए , गुलप के लिए , ग्रंट के लिए , अन्य चौखटे और भाषाओं के लिए )

अपने विकास पाइपलाइन में बैबेल का उपयोग करना आपके जावास्क्रिप्ट को क्रॉस-ब्राउज़र संगत होने के लिए स्वचालित रूप से परिवर्तित (परिवर्तित) कर देगा। या, यदि आप टाइपस्क्रिप्ट का उपयोग कर रहे हैं, तो आप आराम कर सकते हैं; आपका कोड पहले से ही ट्रांसपोंड हो रहा है।

---

एक ट्रांसपिलर (जैसे बाबेल / टाइपस्क्रिप्ट) को सेटअप नहीं करना चाहते हैं, या क्या आप अपने ट्रांसपिलर द्वारा समर्थित नहीं सुविधाओं के साथ खेलना चाहते हैं?

आप क्रोम में जाकर अपने ब्राउज़र में प्रयोगात्मक ECMAScript सुविधाओं को सक्षम कर सकते हैं : // झंडे / # सक्षम- जावास्क्रिप्ट-सद्भाव और जावास्क्रिप्ट सद्भाव ध्वज को सक्षम करना। कुछ सुविधाओं के लिए, आपको जावास्क्रिप्ट हार्मनी ध्वज सक्षम के साथ क्रोम कैनरी का उपयोग करना पड़ सकता है ।

नई जावास्क्रिप्ट एपीआई आमतौर पर बाबेल द्वारा कवर नहीं किए जाते हैं, और उनका अपना क्रोम ध्वज होगा।

एरो फ़ंक्शंस का उपयोग करना

यह सवाल विशेष रूप से तीर के कार्यों का उपयोग करके उल्लेख किया गया है। एरो फ़ंक्शन अब IE और ओपेरा मिनी को छोड़कर सभी ब्राउज़रों में मूल रूप से समर्थित हैं। देखें caniuse ।

यदि आप तीर के कार्यों के साथ खेलना चाहते हैं तो यह थोड़ा मुश्किल हुआ करता था। नीचे दिए गए इतिहास से पता चलता है कि इस सुविधा के साथ खेलने के लिए समय पर अलग-अलग बिंदुओं पर क्या हुआ।

1) सबसे पहले, तीर के कार्य केवल सक्षम ध्वज के साथ क्रोम कैनरी में काम करते थे chrome://flags/#enable-javascript-harmony। ऐसा लगता है कि यह कार्यक्षमता कम से कम आंशिक रूप से संस्करण 39 द्वारा लागू की गई थी।

2) फिर, एरो फ़ंक्शंस जहां Google क्रोम में जावास्क्रिप्ट हार्मनी ध्वज के पीछे उपलब्ध कराया गया है ।

3) और अंत में, Google Chrome 45 में , एरो फ़ंक्शंस जहां डिफ़ॉल्ट रूप से सक्षम हैं।

आप अन्य नई ECMAScript सुविधाओं के साथ समान पैटर्न की उम्मीद कर सकते हैं।

Comments

टाइपस्क्रिप्ट एक महान ट्रांसपिलर के साथ आता है। बैबेल एक सामान्य जावास्क्रिप्ट ट्रांसपिलर है। यदि आप अपने es6 कोड को es5 तक ट्रांसपाइल करते हैं, तो आपको es6 की अजीबता का उपयोग शुरू करने के लिए ब्राउज़र समर्थन की प्रतीक्षा नहीं करनी होगी!

— wp-overwatch.com

Answer 4

बस उपयोग सख्त मोड का उपयोग बंद करने में करें (जरूरत नहीं है, लेकिन यह एक शानदार तरीका है) और Chrome आपके कोड को ES6 के रूप में निष्पादित करने में सक्षम होगा ...

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

यहां एक उदाहरण ... http://jsbin.com/tawubotama/edit?html,js,console,output उपयोग स्ट्रिक मोड लाइन को हटाने का प्रयास करें, और फिर से प्रयास करें, कंसोल पर एक त्रुटि लॉग की जाएगी।

Answer 5

2015 के नवंबर तक, फ़ायरफ़ॉक्स और एज ES6 दौड़ का नेतृत्व कर रहे हैं, यदि आप उन कार्यों का उपयोग करना चाहते हैं जिनमें क्रोम की कमी है। एज में वर्ग / उपवर्ग और फ़ायरफ़ॉक्स में प्रॉक्सी है ; उनके बीच आपके पास लगभग सभी ES6 सुविधाएँ हैं ।

यदि आप Chrome कंसोल में ES6 का उपयोग करते हैं, तो एक सरल, आजमाया हुआ और सही तरीका है:

धैर्य रखें।

ब्राउज़र ES6 को गोद ले रहे हैं - यहां तक ​​कि सफारी, जो कि अधिकांश एचटीएमएल 5 मानकों पर अपने पैर खींच रहा है। Google को समय दें और वे एक-एक करके ES6 सुविधाओं को लागू करेंगे। उदाहरण के लिए तीर फ़ंक्शंस अब उत्पादन चैनल में और बिना ध्वज के उपलब्ध हैं।

एक्सटेंशन की उम्मीद न करें; आप ES6 को ES5 लाइन से लाइन में अनुवाद नहीं कर सकते हैं, इसलिए हम सिर्फ बैबल के साथ कंसोल का विस्तार नहीं कर सकते हैं ।

यह सच है कि एक प्रयोग js ध्वज है, लेकिन यह अच्छे कारणों के लिए मौजूद है। V8 में प्रॉक्सी है लेकिन पुराने (गैर-मानक) सिंटैक्स में और सुरक्षा मुद्दा है । इसका विनाश भी अधूरा है: आप पाएंगे कि कुछ मामलों में यह काम करता है, आने वाले मामलों में यह नहीं करता है।

यदि आप केवल ES6 खेलना चाहते हैं, तो बस एज / फ़ायरफ़ॉक्स के साथ खेलें। वे दोनों लगभग पूरे बैबेल को कवर करते हैं, कंसोल और डीबगर होते हैं, और ऐसी विशेषताएं हैं जो बैबल प्रदान नहीं कर सकते हैं।

Comments

सफारी वास्तव में सभी डेस्कटॉप ब्राउज़रों से आगे है और i610 मोबाइल ES6 समर्थन में Android के लिए क्रोम से आगे है। kangax.github.io/compat-table/es6

— लुई डुरन

@ 10 आईओएस 10 से पहले, सफारी ने उभरती वेब तकनीक की उपेक्षा की है । अब भी, इसके आधे साल बाद, 21% पुराने iOS उपयोगकर्ता ES5 से चिपके हुए हैं क्योंकि पुराने iOS केवल ब्राउज़र को अपग्रेड नहीं कर सकता है, और अभी भी मोबाइल देव में ES6 को अपनाने वाला एकमात्र बल है (98% Android नवीनतम चला सकते हैं क्रोम)। मैं इस उत्तर को अपरिवर्तित रखूँगा क्योंकि Q और A दोनों अप्रचलित हैं, लेकिन यदि आप ES6 से थोड़ा परे हैं, तो Safari 10 अभी भी Async फ़ंक्शन या फ़िंच Api को याद नहीं कर रहा है।

— शीप १