Что такое Babel в JavaScript?
Babel — это инструмент транспиляции для JavaScript, который позволяет разработчикам использовать последние возможности языка JavaScript, даже если они не поддерживаются в текущей версии браузера или среды выполнения Node.js. Babel преобразует современный код JavaScript (ES6+ и далее) в совместимый с более старыми версиями JavaScript, которые могут быть успешно выполнены в различных окружениях.
Основные моменты:
- Установка Babel:
- Babel устанавливается через npm (пакетный менеджер Node.js) с использованием команды npm install —save-dev @babel/core @babel/cli .
- Настройка конфигурации:
- Конфигурация Babel определяется в файле .babelrc или через настройки в package.json . В конфигурации указываются плагины и пресеты для транспиляции.
- Использование плагинов и пресетов:
- Babel использует плагины для выполнения конкретных трансформаций кода. Пресеты представляют собой группы связанных плагинов, предназначенных для определенных целей (например, @babel/preset-env для трансформации современного кода).
Babel js что это
При создании приложения для React.js в прошлых темах для компиляции JSX в JavaScript использовался специальный инструмент — компилятор Babel. Для этого, во-первых, на веб-страницу подключался скрипт компилятора:
Это специальный скрипт, который позволяет при запуске веб-страницы в брузере на лету преобразовать весь содержащийся на ней код React в код javascript, понятный браузеру.
Во-вторых, элемент script, который содержал основной код приложения, имел атрибут type=»text/babel» :
Если мы уберем подключениие скрипта компилятора Babel или уберем атрибут type=»text/babel» наш код не будет работать. Более того в браузере мы увидим ошибки, поскольку по умолчанию мы не можем определять код html в javascript, как это делается с помощью JSX. Нам обязательно надо транслировать код JSX в обычный JavaScript, который понимается браузером.
Кроме того, использование Babel позволяет задействовать в приложении многие возможности новых стандартов JS, в частности, ES2015+, которые в полноценной мере на данный момент поддерживаются не всеми браузерами. Например, определим следующую веб-страницу:
Hello React
В данном случае элемент, который будет отображаться на веб-странице, вынесен в отдельный класс Hello, который наследуется от класса React.Component. То есть в данном случае уже применяются возможности ES6. Подобное определение компонента позволяет работать с ним и развивать его отдельно от другого кода. А чтобы его использовать, в функцию ReactDOM.render() в качестве первого параметра передается одноименный элемент . Но без компилятора Babel мы естественно это все не смогли бы использовать.
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.
Что такое Babel и где его используют
Транспайлер — это программа, позволяющая менять исходный код одной программы на эквивалентный исходный код на другом языке. В случае с Babel, он переписывает современный Javascript на старый.
Где и зачем используют Babel
Babel это не просто транспайлер, это лучший друг разработчика. ECMA International, пока что, выпускает обновления языка Javascript каждый год. В связи с этим, у разработчиков появляются новые возможности: более короткий синтаксис, стрелочные функции, промисы и.т.д.
Соответственно, не все современные браузеры могут или хотят идти в ногу с этими изменениями. А еще, к этому прибавляем старые браузеры, которые больше никогда не обновятся. Но их все равно пока используют, привет Internet Explorer.
Вот здесь и нужен Babel. Он помогает не ждать обновлений браузеров, а сразу использовать всю мощь современных стандартов Javascript.
Используют Babel вместе с различными сборщиками проектов: webpack и gulp, устанавливая необходимый “функционал” с помощью менеджера пакетов NPM. Сам NPM входит в состав Node.js.
Единственный минус Babel (для меня), это слишком сильное видоизменение изначального кода. Обычно, такое можно прочитать с большим трудом.
После использования Babel.
В целом, вы и так сможете писать нормально работающий код на всех современных браузерах без использования Babel. Например, сегодняшний Safari и Google Chrome уже поддерживают ES2015 Javascript. Поэтому иногда можно обойтись без использования Babel. Естественно, если вам не сильно важно будет ли работать код в старых браузерах.
Опубликовано: 2019-10-13 19:44
Нужен сайт?
Готов за разумную плату разработать сайт, CRM-систему или внедрить дополнительный функционал в существующий проект.
Как связаться
Максим Колмогоров — технический директор компании vverh.digital, разработчик сайтов и CRM-систем. Почта для обратной связи maxim.kolmogorov@gmail.com.