Я шукаю спосіб запустити код ECMAScript 6 в консолі свого браузера, але більшість браузерів не підтримують функціональність, яку я шукаю. Наприклад, Firefox - єдиний браузер, який підтримує функції стрілок.
Чи є спосіб (розширення, сценарій користувача тощо), який я можу запустити ці функції в Chrome?
Відповіді:
У Chrome більшість функцій ES6 приховано за прапором під назвою "Експериментальні функції JavaScript". Відвідайте chrome://flags/#enable-javascript-harmony, увімкніть цей прапор, перезавантажте Chrome, і ви отримаєте багато нових функцій .
Функції стрілки ще не реалізовані в V8 / Chrome , тому цей прапор не буде "розблокувати" функції стрілок.
Оскільки функції стрілок є зміною синтаксису, неможливо підтримати цей синтаксис, не змінивши спосіб розбору JavaScript. Якщо ви любите розвиватися в ES6, ви можете написати код ES6 і використовувати компілятор ES6-ES5 для створення коду JavaScript, сумісного з усіма існуючими (сучасними) браузерами.
Наприклад, див. Https://github.com/google/traceur-compiler . Що стосується написання, він підтримує всі нові функції синтаксису ES6 . Разом із зазначеним у верхній частині цієї відповіді прапором ви дуже наблизитесь до бажаного результату.
Якщо ви хочете запустити синтаксис ES6 безпосередньо з консолі, ви можете спробувати замінити оцінювач JavaScript консолі (такий, що перед виконанням коду запускається препроцесор Traceur). Якщо ви хочете зробити це, погляньте на цю відповідь, щоб дізнатися, як змінити поведінку інструментів розробника.
classсинтаксис, наприклад.
--enable-javascript-harmonyпрапор, /(?<!a)b/.test('ab')з'явиться помилка : (і викине наступну помилку, якщо прапор не встановлено: "Uncaught SyntaxError: Неправильний регулярний вираз: / (? <! A) b /: Недійсна група")
Babel - чудовий транспілятор для випробування ES6. Ви можете запустити ES6 у веб-переглядачі в розділі «Спробуйте це» на їхньому веб-сайті. Він функціонує аналогічно jsfiddle.
Наприклад, стрілки:
let add = (x,y) => x + y;
let result = add(1,1);
console.log(result);Babel "перекладає", тобто переводить ES6 в ES5 javascript, який може працювати за сучасними технологіями браузера. Ви можете встановити Babel через npm install -g babel. Після встановлення ви можете зберегти приклад стрілок вище у файл. Скажімо, ми називаємо файл "ES6.js". Якщо припустимо, що у вас встановлений вузол, тоді в командному рядку подається вихід на вузол:
babel ES6.js | node
І ви побачите вихід 2. Ви можете зберегти перекладений файл назавжди за допомогою команди:
babel ES6.js --out-file output.js
output.js "перекладено":
"use strict";
var add = function (x, y) {
return x + y;
};
var result = add(1, 2);
console.log(result);Що, звичайно, можна запустити в будь-якому сучасному браузері.
ES6 - це швидко рухається ціль. Зверніться до таблиці сумісності, щоб знайти функції, які підтримуються транспіляторами, такими як Traceur і Babel, та підтримка браузера. Можна навіть розширити діаграму, щоб побачити тест, який використовується для перевірки сумісності:
Щоб випробувати край крови ES6 у веб-переглядачі, спробуйте щорічну збірку Firefox або випустіть канали Chrome
sudo npm install -g --save-dev babel-cli babel-preset-es2015і $(npm bin)/babel ES6.js --presets es2015зробити його роботу, ВЧ: babeljs.io/docs/plugins/preset-es2015
Ви, ймовірно, шукаєте одне з наступних посилань:
Використання Babel в конвеєрі розробки автоматично перетворить (перетворить) ваш JavaScript, щоб він був сумісний між веб-браузерами. Або якщо ви використовуєте TypeScript, ви можете спокійно відпочити; ваш код уже транслюється.
Не хочете налаштовувати транспілер (наприклад, Babel / Typescript), або ви хочете грати з функціями, які ще не підтримуються вашим транспілером?
Ви можете увімкнути експериментальні функції ECMAScript у своєму браузері, перейшовши до chrome: // flags / # enable-javascript-гармонія та включивши прапор JavaScript Harmony. Для деяких функцій вам може знадобитися використовувати Chrome Canary з увімкненим прапором JavaScript Harmony.
Нові API API зазвичай не покриваються Babel, і вони матимуть власний прапор Chrome.
Це питання спеціально згадано за допомогою функцій стрілок. Функції стрілок тепер підтримуються у всіх браузерах, окрім IE та Opera Mini. Дивіться канюзу .
Раніше було трохи складно, якщо ви хотіли грати зі стрілковими функціями. Нижче наведена історія показує, що потрібно було в різні моменти часу, щоб грати з цією функцією.
1) Спочатку функції стрілок працювали лише в Chrome Canary з
chrome://flags/#enable-javascript-harmonyувімкненим прапором. Схоже, ця функціональність була принаймні частково реалізована версією 39.2) Потім функції стрілок, якщо вони доступні в Google Chrome за прапором JavaScript Гармонія.
3) І, нарешті, у Google Chrome 45 функції зі стрілками, якщо вони включені за замовчуванням.
Ви можете очікувати, що подібна схема трапиться і з іншими новими функціями ECMAScript.
Просто використовуйте суворий режим використання для закриття (не потрібно, але це чудовий підхід), і Chrome зможе виконати ваш код як ES6 ...
(function(){
'use strict';
//your ES6 code...
})();Ось приклад ... http://jsbin.com/tawubotama/edit?html,js,console,output спробуйте видалити рядок строкового режиму використання , і повторіть спробу, буде записано помилку на консолі.
Станом на 2015 листопада, Firefox та Edge очолювали перегони ES6, використовуйте їх, якщо ви хочете експериментувати з функціями, яких не вистачає Chrome. Edge має клас / підклас, а у Firefox є проксі ; між ними у вас є практично всі функції ES6 .
Якщо вам потрібно використовувати ES6 в консолі Chrome, є один простий, перевірений і справжній спосіб:
Будьте терплячі.
Браузери приймають ES6 - навіть Safari, який перетягує ноги за більшістю стандартів HTML5. Дайте Google часу, і вони будуть реалізовувати функції ES6 по черзі. Наприклад, функції стрілок тепер доступні у виробничому каналі та без прапора.
Не чекайте розширень; ви не можете перевести ES6 на ES5 по черзі, тому ми не можемо просто розширити консоль з Babel .
Це правда, що існує прапор js експерименту, але він існує з поважних причин. V8 має проксі, але у старому (нестандартному) синтаксисі та має проблеми із безпекою . Його руйнування також є неповним: ви виявите, що в деяких випадках це працює, а в інших випадках це не відбувається.
Якщо ви просто хочете грати на ES6, просто пограйте з Edge / Firefox. Вони обидва охоплюють майже цілий Babel, мають консоль та налагоджувач та мають функції, які Babel не може надати.