Использование ECMAScript 6
Я ищу способ запуска кода ECMAScript 6 в консоли моего браузера, но большинство браузеров не поддерживают функции, которые я ищу. Например, Firefox - единственный браузер, который поддерживает функции стрелок.
Есть ли способ (расширение, пользовательский скрипт и т. Д.), Чтобы я мог запустить эти функции в Chrome?
5 ответов
В 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);
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
Использование ECMAScript Next (ES6, ES7 и т. Д.)
Чтобы новые функции работали для всех зрителей, вам нужно использовать транспортер. Транспортер позволяет вам использовать новейшие функции ECMAScript сегодня, превращая ваш код в код, совместимый во всех браузерах. Ниже приведены несколько хороших транспортеров.
Babel ( для Gulp, для Webpack, для Grunt, для других фреймворков и языков)
Если вы используете TypeScript, TypeScript передаст вам код.
Не хотите устанавливать транспортер или хотите использовать функции, которые еще не поддерживаются вашим транспортером?
Вы можете включить экспериментальные функции ECMAScript в своем браузере, перейдя в chrome://flags/#enable-javascript-harmony и включив флаг JavaScript Harmony. Для некоторых функций вам, возможно, придется использовать Chrome Canary с включенным этим флагом.
Использование функций стрелки
Этот вопрос специально упоминается с помощью стрелочных функций. Функции стрелок теперь изначально поддерживаются во всех браузерах, кроме 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 не может предоставить.