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

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

Есть ли способ (расширение, пользовательский скрипт и т. Д.), Чтобы я мог запустить эти функции в Chrome?

В 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 запускался до выполнения кода). Если вы хотите сделать это, посмотрите на этот ответ, чтобы узнать, как изменить поведение инструментов разработчика.

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

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

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

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

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

Вы, вероятно, ищете одну из следующих ссылок:

Babel ( для Webpack , для Gulp , для Grunt , для других фреймворков и языков )

Использование Babel в вашем конвейере разработки автоматически преобразует (конвертирует) ваш JavaScript для кросс-браузерной совместимости. Или, если вы используете TypeScript, вы можете быть спокойны; ваш код уже передается.

Не хотите устанавливать транспортер (такой как Babel / Typescript) или хотите использовать функции, которые еще не поддерживаются вашим транспортером?

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

Новые JavaScript API обычно не покрываются Babel и будут иметь собственный флаг Chrome.

Использование функций стрелки

Этот вопрос специально упоминается с помощью стрелочных функций. Функции стрелок теперь изначально поддерживаются во всех браузерах, кроме IE и Opera Mini. Смотри caniuse .

Раньше было немного сложно, если вы хотели играть с функциями стрелок. Ниже история показывает, что потребовалось в разные моменты времени, чтобы играть с этой функцией.

1) Сначала функции стрелок работали только в Chrome Canary с chrome://flags/#enable-javascript-harmonyвключенным флагом. Похоже, что эта функциональность была хотя бы частично реализована в версии 39.

2) Затем функции стрелок стали доступны в Google Chrome за флагом JavaScript Harmony.

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 имеет Proxy ; между ними у вас есть практически все функции ES6 .

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

Потерпи.

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

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

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

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