ES-2015 сейчас
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/polyfills.
Стандарт ES-2015 был принят в июне 2015. Пока что большинство браузеров реализуют его частично, текущее состояние реализации различных возможностей можно посмотреть здесь: https://kangax.github.io/compat-table/es6/.
Когда стандарт будет более-менее поддерживаться во всех браузерах, то весь учебник будет обновлён в соответствии с ним. Пока же, как центральное место для «сбора» современных фич JavaScript, создан этот раздел.
Чтобы писать код на ES-2015 прямо сейчас, есть следующие варианты.
Конкретный движок JS
Самое простое – это когда нужен один конкретный движок JS, например V8 (Chrome).
Тогда можно использовать только то, что поддерживается именно в нём. Заметим, что в V8 большинство возможностей ES-2015 поддерживаются только при включённом use strict .
При разработке на Node.JS обычно так и делают. Если же нужна кросс-браузерная поддержка, то этот вариант не подойдёт.
Babel.JS
Babel.JS – это транспайлер, переписывающий код на ES-2015 в код на предыдущем стандарте ES5.
Он состоит из двух частей:
- Собственно транспайлер, который переписывает код.
- Полифил, который добавляет методы Array.from , String.prototype.repeat и другие.
На странице https://babeljs.io/repl/ можно поэкспериментировать с транспайлером: слева вводится код в ES-2015, а справа появляется результат его преобразования в ES5.
Обычно Babel.JS работает на сервере в составе системы сборки JS-кода (например webpack или brunch) и автоматически переписывает весь код в ES5.
Настройка такой конвертации тривиальна, единственно – нужно поднять саму систему сборки, а добавить к ней Babel легко, плагины есть к любой из них.
Если же хочется «поиграться», то можно использовать и браузерный вариант Babel.
Это выглядит так:
Сверху подключается браузерный скрипт browser.min.js из пакета Babel. Он включает в себя полифил и транспайлер. Далее он автоматически транслирует и выполняет скрипты с type=»text/babel» .
Размер browser.min.js превышает 1 мегабайт, поэтому такое использование в production строго не рекомендуется.
Примеры на этом сайте
Только при поддержке браузера
Запускаемые примеры с ES-2015 будут работать только если ваш браузер поддерживает соответствующую возможность стандарта.
Это означает, что при запуске примеров в браузере, который их не поддерживает, будет ошибка. Это не означает, что пример неправильный! Просто пока нет поддержки…
Рекомендуется Chrome Canary, большинство примеров в нём работает. Firefox Developer Edition тоже неплох в поддержке современного стандарта, но на момент написания этого текста переменные let работают только при указании version=1.7 в типе скрипта: . Надеюсь, скоро это требование ( version=1.7 ) отменят.
Впрочем, если пример в браузере не работает (обычно проявляется как ошибка синтаксиса) – почти все примеры вы можете запустить при помощи Babel, на странице Babel: try it out. Там же увидите и преобразованный код.
На практике для кросс-браузерности всё равно используют Babel.
Почему стоит использовать Babel в разработке. Инструкция по написанию Babel плагина
Babel — это компилятор JavaScript, преобразующий код в старые версии ECMAScript. Рассказываем, в чём его суть и пишем свой простой плагин.
Какую проблему решает Babel
В языке JavaScript изменения происходят ежегодно, а некоторые ECMAScript конвенции вносят даже слишком много дополнительного синтаксического сахара, настолько, что браузерные движки исполняющие JS код не успевают обновляться под изменения. В связи с этим у разработчиков стоит выбор:
1. Писать в legacy стиле, не пользуясь новыми фишками;
2. Писать в новом стиле, и код будет работать только на новых версиях движков;
3. Самый оптимальный вариант — писать код в современном стиле и транспилировать его с помощью Babel в более старые версии ECMAScript, чтобы его могли исполнять даже старые браузерные движки. В общем, Babel — это единый инструмент для того, чтобы ваш код поддерживался даже старыми браузерами.
Как работает Babel под капотом
Чтобы разобраться в том, что написал разработчик, и перевести это в более старую версию JS, Babel требуется максимально декомпозировать код. Делает он это с помощью составления AST дерева и его последующего анализа. Babel разбивает наш код на самые мелкие частицы, даже «;» или «пробел» — отдельная часть AST дерева. После того как Babel создал такое дерево, он может пройтись по каждому узлу и преобразовать его нужным образом.
Особая сила Babel
Особая сила Babel заключается в огромном количестве разнообразных плагинов, а самое главное — плагин можно написать самому. Плагины имеют доступ к абстрактному синтаксическому дереву AST и могут изменять его на этапе транспиляции кода перед выходом в итоговый бандл. Babel плагины работают по паттерну Visitor. Суть паттерна в том, что если у нас есть некая абстракция (в нашем случае это AST), мы не взаимодействуем с ней напрямую, а работаем с ней через посетителя, то есть Visitor. Наша абстракция будет иметь метод, задача которого простая – просто передать себя посетителю, а он уже будет работать с ним.
Пишем свой Babel плагин
Я напишу простой плагин в учебных целях, который будет менять все операторы «+» на «-». Он бесполезный, но на его примере можно понять, как пишутся плагины в целом.
1. Вы смотрите в AST Explorer, как выглядят определённые ноды в абстрактном синтаксическом дереве;
2. Обрабатываете эти ноды в коде так, как вы хотите.
Я написал код в AST Explorer, после установки курсора на значок «+» увидел, что мне нужен BinaryExpression, и написал вот такой вот плагин, опираясь на паттерн Visitor:
Вот так подключил его:
В итоге мой код скомпилировался и на выходе в сближенном файле я получил вот такой консоль лог, где видно, что наш плагин работает и меняет «+» на «-».
Следите за новыми постами по любимым темам
Подпишитесь на интересующие вас теги, чтобы следить за новыми постами и быть в курсе событий.
What is Babel?
Привет народ! С вами Naize и сегодня мы, наконец то, поговорим про Babel. Разберем, что это такое, зачем оно нужно, и с чем это Babel едят 🙂 Этот пост — своего рода продолжение поста про Webpack, так как в дальнейшем мы будем рассматривать эти технологии совместно, и научимся правильно их настраивать для комфортной Frontend разработки.
Пару слов про Babel
Babel — это JavaScript транспилятор, который очень популярен среди разработчиков из-за того, что он в мгновенье ока превращает код написанный на ES6, или более поздних стандартах, в более поддерживаемый всеми браузерами код. Как правило на выходе мы получаем ES5. Таким образом, разрабы могут писать код юзая самые последние возможности JS и не беспокоиться об ошибках из-за несовместимости.
Давайте посмотрим на простой пример. Вот у нас есть код JavaScript, который соответствует стандартам ES6:
const numbers = [ 5, 10, 15];
console.log(numbers.map(number => number + 5)); // [10, 15, 20]
Babel превратит его в:
var numbers = [ 5, 10, 15];
console.log(numbers.map(function (number) return number + 5;
>));
И ещё один важный факт про Babel — это самый совместимый из всех транспиляторов ES6, который куда круче других, таких как Traceur от Google (да да, помимо Babel есть и другие JS-транспиляторы).
Babel 7 = новые возможности
До нынешней, седьмой версии, что логично, был Babel 6, выпущенный в 2015 году. С тех пор в репозитории на GitHub было более 4000 коммитов и 50 предварительных релизов. И после этого долгого и трудного пути у нас есть Babel 7.
В этом посте мы поговорим про те возможности, которые даёт нам последняя версия Babel!
Babel Upgrade
Babel 7 поставляется со специальным инструментом обновления, который называется babel-upgrade. Чтобы использовать этот инструмент, вы можете запустить его через npx (поставляется вместе с npm):
$ npx babel-upgrade
Или вы можете глобально установить его с помощью npm / yarn:
$ npm i babel-upgrade-g
Конфигурация через JavaScript файл
Babel 7 поддерживает новфй способ настройки, с помощью babel.config.js файл. Но тут важно помнить о том,что этот файл не является заменой старого доброго .babelrc. Это просто отличное дополнение, которое может быть полезно в определенных случаях.
Вот пример babel.config.js файла:
module.exports = function () <
const presets = [ . ];
const plugins = [ . ];
return <
presets,
plugins
>;
>
А вот аналогичный пример, но уже используя .babelrc:
<
"presets": [. ],
"plugins": [. ]
>
Используя новый вариант файла конфигурации, вы можете более гибко настраивать Babel. Почитайте на досуге офф документацию, и решите сами, какой вариант больше подходит для ваших проектов.
Overrides
В продолжении предыдущей темы, поговорим про так называемые переопределения. Они позволяют вам указать различные конфигурации для разных частей проекта.
Теперь, если ваш проект требует различных конфигураций для тестовых файлов (это я про файлы, в которых вы тесты пишите), клиентского и серверного кода, больше не придется создавать отдельные .babelrc файлы. Вы можете написать что-то вроде этого:
module.exports = <
presets: [
// default config.
],
overrides: [
<
test: ["./node_modules"],
presets: [
// config for node_modules
],
>,
<
test: ["./tests"],
presets: [
// config for tests
],
>
]
>;
Быстрее чем раньше
Babel 7 создаёт сборки быстрее, чем когда-либо прежде!
What is Babel?
Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you:
- Transform syntax
- Polyfill features that are missing in your target environment (through a third-party polyfill such as core-js)
- Source code transformations (codemods)
- And more! (check out these videos for inspiration)
JavaScript
// Babel Input: ES2015 arrow function [1, 2, 3].map(n => n + 1); // Babel Output: ES5 equivalent [1, 2, 3].map(function(n) return n + 1; >); For an awesome tutorial on compilers, check out the-super-tiny-compiler, which also explains how Babel itself works on a high level.
ES2015 and beyond
Babel has support for the latest version of JavaScript through syntax transformers.
These plugins allow you to use new syntax, right now without waiting for browser support. Check out our usage guide to get started.
JSX and React
Babel can convert JSX syntax! Check out our React preset to get started. Use it together with the babel-sublime package to bring syntax highlighting to a whole new level.
You can install this preset with
npm install --save-dev @babel/preset-react yarn add --dev @babel/preset-react pnpm add --save-dev @babel/preset-react and add @babel/preset-react to your Babel configuration.
export default function DiceRoll() const getRandomNumber = () => return Math.ceil(Math.random() * 6); >; const [num, setNum] = useState(getRandomNumber()); const handleClick = () => const newNum = getRandomNumber(); setNum(newNum); >; return ( div> Your dice roll: num>. button onClick=handleClick>>Click to get a new numberbutton> div> ); >; Learn more about JSX
Type Annotations (Flow and TypeScript)
Babel can strip out type annotations! Check out either our Flow preset or TypeScript preset to get started. Keep in mind that Babel doesn’t do type checking; you’ll still have to install and use Flow or TypeScript to check types.
You can install the flow preset with
npm install --save-dev @babel/preset-flow yarn add --dev @babel/preset-flow pnpm add --save-dev @babel/preset-flow JavaScript
// @flow function square(n: number): number return n * n; > or the typescript preset with
npm install --save-dev @babel/preset-typescript yarn add --dev @babel/preset-typescript pnpm add --save-dev @babel/preset-typescript JavaScript
function Greeter(greeting: string) this.greeting = greeting; > Learn more about Flow and TypeScript!
Pluggable
Babel is built out of plugins. Compose your own transformation pipeline using existing plugins or write your own. Easily use a set of plugins by using or creating a preset. Learn more →
Create a plugin on the fly with astexplorer.net or use generator-babel-plugin to generate a plugin template.
example-babel-plugin.js
// A plugin is just a function export default function( types: t >) return visitor: Identifier(path) let name = path.node.name; // reverse the name: JavaScript -> tpircSavaJ path.node.name = [. name] .reverse() .join(""); >, >, >; > Debuggable
Source map support so you can debug your compiled code with ease.
Spec Compliant
Babel tries to stay true to the ECMAScript standard, as much as reasonably possible. It may also have specific options to be more spec compliant as a tradeoff to performance.
Compact
Babel tries using the least amount of code possible with no dependence on a bulky runtime.
This may be difficult to do in cases, and there are «assumptions» options that tradeoff spec compliancy for readability, file size, and speed.