Использование ECMAScript 6

Я ищу способ запуска кода ECMAScript 6 в консоли браузера, но большинство браузеров не поддерживают функциональность, которую я ищу. Например, Firefox - это единственный браузер, который поддерживает функции стрелок.

Есть ли способ (расширение, usercript и т.д.) Я могу запускать эти функции в Chrome?

Ответ 1

В Chrome большинство функций ES6 скрыты за флагом "Экспериментальные функции JavaScript". Посетите chrome://flags/#enable-javascript-harmony, включите этот флаг, перезапустите Chrome, и вы получите множество новых функций.

Функции стрелок еще не реализованы в V8/Chrome, поэтому этот флаг не будет "разблокировать" функции стрелок.

Поскольку функции стрелок являются синтаксическим изменением, невозможно поддерживать этот синтаксис, не изменяя способ анализа JavaScript. Если вам нравится разрабатывать ES6, тогда вы можете написать код ES6 и использовать компилятор ES6-to-ES5 для генерации кода JavaScript, который совместим со всеми существующими (современными) браузерами.

Например, см. https://github.com/google/traceur-compiler. Начиная с написания, он поддерживает все новые синтаксические функции ES6. Вместе с флагом, указанным в верхней части этого ответа, вы получите очень близкий к желаемому результату.

Если вы хотите запустить синтаксис ES6 непосредственно с консоли, вы можете попытаться перезаписать оценщика JavaScript на консоли (чтобы перед выполнением кода выполнялся препроцессор Traceur). Если вам интересно это сделать, посмотрите этот ответ, чтобы узнать, как изменить поведение инструментов разработчика.

Ответ 2

Babel - отличный транспилер для тестирования ES6. Вы можете запустить ES6 в браузере в разделе "Попробуйте" на своем веб-сайте. Он работает аналогично jsfiddle.

Стрелки, например:

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

отображает результат 2.

Babel "transpiles", то есть переводит ES6 в javascript ES5, который может быть запущен текущей технологией браузера. Вы можете установить Babel через npm install -g babel. После установки вы можете сохранить приведенный выше пример стрелок в файл. Скажем, мы называем файл "ES6.js". Предполагая, что у вас установлен node, а затем в строке командной строки вывод на node:

babel ES6.js | node

И вы увидите вывод 2. Вы можете сохранить переведенный файл навсегда с помощью команды:

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);

Что, конечно, можно запустить в любом современном браузере.

Пример использования классов

ES6 - быстро движущаяся цель. Обратитесь к таблице Таблица совместимости, чтобы найти функции, поддерживаемые транспилерами, такими как Traceur и Babel и поддержка браузера. Вы даже можете развернуть диаграмму, чтобы увидеть тест, используемый для проверки совместимости:

enter image description here

Чтобы опробовать краю ES6 в браузере, попробуйте ночной сборщик Firefox или каналы выпуска Chrome

Ответ 3

Обновление:

Функции стрелок теперь работают изначально во всех браузерах, кроме IE и Opera Mini. См. caniuse.

Для других экспериментальных функциональных возможностей ECMAScript 6 вы можете перейти к chrome://flags/#enable-javascript-harmony и включить флагов JavaScript Harmony. Для некоторых функций вам, возможно, придется использовать Chrome Canary с включенным флагом или использовать транспилер ES6, например Babel.


Функции стрелок работают в Chrome Canary с включенным флагом chrome://flags/#enable-javascript-harmony.

Chrome Canary в настоящее время находится в версии 47. Как только Google Chrome обновится до версии 47, вы сможете использовать функции стрелок внутри Google Chrome (но только если у вас есть этот флаг javascript-harmony включен). До тех пор вы можете подготовиться к будущему, используя Chrome Canary, или вы можете использовать транспилер ES6, например Babel.

Изменить: теперь функции Arrow работают в Google Chrome! Просто включите флаг гармонии JavaScript, перейдя в chrome://flags/#enable-javascript-harmony и нажав кнопку enable.

Ответ 4

Просто используйте использовать строгий режим, в закрытие (не нужно, но это отличный подход), и Chrome сможет выполнить ваш код как ES6...

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

Ответ 5

По состоянию на 2015 год ноябрь, Firefox и Edge лидируют гонки ES6, используйте их, если вы хотите экспериментировать с функциями, отсутствующими в Chrome. Edge имеет класс/подкласс, а Firefox Proxy; между ними у вас практически все функции ES6.

Если вы должны использовать ES6 в консоли Chrome, есть один простой, проверенный и правдивый способ:

Будьте терпеливы.

Браузеры принимают ES6 - даже Safari, который тянет ноги на большинстве стандартов HTML5. Дайте время Google, и они будут реализовывать функции ES6 один за другим. Например, теперь функции стрелок доступны на рабочем канале и без флага.

Не ожидайте расширения; вы не можете перевести ES6 на ES5 по строкам, поэтому мы не можем просто продлить консоль с Babel.

Верно, что существует флаг js эксперимента, но он существует по уважительным причинам. V8 имеет прокси, но в старом (нестандартном) синтаксисе и имеет проблему безопасности. Его деструкционирование также неполно: вы обнаружите, что в некоторых случаях это работает, в случаях, когда это не так.

Если вы просто хотите играть в ES6, просто играйте с Edge/Firefox. Они оба покрывают почти весь Babel, имеют консоль и отладчик, и имеют функции, которые Babel не может предоставить.