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

162

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

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

Spedwards
источник

Ответы:

158

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

Роб W
источник
5
Существует также ScratchJS, инструмент разработки для Chrome: chrome.google.com/webstore/detail/scratch-js/…
пиксель 67
8
Функции стрелки теперь полностью реализованы в последней версии Chrome. Этот совет остается полезным для других функций ES6. Как и classсинтаксис, например.
Адам Браун
7
Этот ответ сейчас в основном устарел.
Михал Перлаковский
@ Gothdo Специфика действительно устарела (функции стрелок хорошо поддерживаются в наши дни), но общие рекомендации по включению экспериментальных функций JS все еще верны. Например, просмотр в регулярном выражении по-прежнему отключен по умолчанию. Следующее вернет false, если --enable-javascript-harmonyфлаг установлен: /(?<!a)b/.test('ab')(и выдает следующую ошибку, если флаг не установлен: «Uncaught SyntaxError: Недопустимое регулярное выражение: / (? <! A) b /: Недопустимая группа»)
Rob W
Это не устарело, была такая же проблема с arrow_functions для клиента со старой версией Windows. Флаг сделал свое дело, спасибо!
Хайме Йоль
47

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

P.Brian.Mackey
источник
Если вы еще не слышали об этом, проверьте jspm. Это позволяет использовать модули CommonJS, AMD и ES6. Он использует Traceur или Babel для «компиляции» ES6 в ES5 в браузере перед выполнением. Одним из приятных преимуществ jspm является возможность использовать модули npm или (с небольшим количеством конфигурации) модули из Github. Другие репозитории модулей, вероятно, будут добавлены в будущем. JSPM также имеет довольно приличную поддержку браузера. Не проверено, но я считаю, что это IE9 +. (Ваш компилятор ES6 тоже влияет на это.)
Кевин Дайс
В Ubuntu 17.04 мне нужно сделать sudo npm install -g --save-dev babel-cli babel-preset-es2015и $(npm bin)/babel ES6.js --presets es2015заставить это работать, rf: babeljs.io/docs/plugins/preset-es2015
Fruit
12

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

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

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




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

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

JS гармония скриншот

Новые 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.

wp-overwatch.com
источник
TypeScript поставляется с отличным транспортером. Babel также является распространенным JavaScript-транспортером. Если вы перенесете свой код es6 на es5, вам не придется ждать поддержки браузера, чтобы начать использовать потрясающую версию es6!
wp-overwatch.com
6

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

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

Вот пример ... http://jsbin.com/tawubotama/edit?html,js,console,output попытайтесь удалить строку использования строгого режима и повторите попытку, в консоли будет зарегистрирована ошибка.

Мигель Латтуада
источник
3

По состоянию на ноябрь 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 не может предоставить.

Sheepy
источник
2
Safari опережает все настольные браузеры, а ios10 mobile опережает Chrome для Android в поддержке ES6. kangax.github.io/compat-table/es6
Луи Дюран
@Louis До выхода iOS 10 Safari пренебрегал появившимися веб-технологиями . Даже сейчас, спустя полгода после этого, 21% старых пользователей iOS застряли с ES5, поскольку более старая iOS не может обновить только браузер, и все еще остается единственной силой, сдерживающей переход на ES6 в мобильных устройствах разработчика (98% Android могут работать до последнего Хром). Я оставлю этот ответ без изменений, так как Q и ​​A устарели, но если вы посмотрите немного за ES6, Safari 10 все еще отстает, пропуская асинхронную функцию или выбирая api.
Sheepy