[119]
04 Сен 2018, 09:15

Вышел Babel 7 — что нового?

Babel logo

 

Пару слов про Babel

Babel является транспилером для JavaScript, который любят разработчики за возможность превратить ES6 или ES7 в код, работающий на любых браузерах и устройствах.

Это важно, потому что большинство устройств и браузеров по-прежнему поддерживают устаревшие стандарты, такие как ES5. Поэтому разработчики могут писать код в самых свежих стандартах и не беспокоиться об ошибках из-за несовместимости.

Например, если вы напишете следующий код 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 6 был выпущен в 2015 году. С тех пор он прошел более 4000 коммитов и 50 предварительных релизов. Теперь разработчики Babel принесли нам очередное важное обновление: Babel 7.

Babel теперь быстрее и поставляется с инструментом обновления, настройками JavaScript, переопределениями конфигурации, параметрами для минимизации размера, поддержкой фрагментов JSX React и, что еще важнее … поддержка для TypeScript!

Итак, некоторые основные обновления и особенности Babel 7:

 

 

babel-upgrade

Babel 7 поставляется с новым инструментом обновления под названием babel-upgrade. Этот инструмент автоматически вносит изменения в файлы package.json и .babelrc.

Чтобы использовать этот инструмент, вы можете запустить его непосредственно в репозитории GitHub:

$ npx babel-upgrade

Or you can globally install it using NPM/Yarn:

$ npm i babel-upgrade -g

 

 

Конфигурационные файлы

В Babel 7 появился новый файл: babel.config.js. Обратите внимание, что этот файл не является заменой .babelrc. Это просто дополнение, которое может быть полезно для определенных случаев.

Вы хотите программно создать конфигурацию для своего проекта? Или вы хотите скомпилировать node_modules вашего проекта? Тогда файл babel.config.js тут очень кстати!

Ниже приведен пример файла babel.config.js:

module.exports = function () {   
const presets = [ ... ];
const plugins = [ ... ];

return {
presets,
plugins
};
}

Файл .babelrc, с другой стороны, скорее представляет собой файл JSON вместо JS-файла:

{   
"presets": [...],
"plugins": [...]
}

Добавив файл babel.config.js, Babel сразу «видит» конфигурацию вместо поиска в каждом файле. Это также позволяет нам легко выполнять переопределения.

 

 

Overrrides

Переопределения (overrides) в Babel позволят вам указать различные конфигурации для каждого glob. Поэтому, если для вашего проекта JavaScript требуются разные конфигурации компиляции для его тестовых файлов, кода клиента и кода сервера, нам не нужно будет создавать отдельный файл .babelrc для каждого. Вместо этого мы можем сделать что-то вроде этого:

module.exports = {   
presets: [
// default config...
],
overrides: [
{
test: ["./node_modules"],
presets: [
// config for node_modules
],
},
{
test: ["./tests"],
presets: [
// config for tests
],
}
]
};

 

 

Опции вывода

В Babel вы можете обернуть плагины в массив и передать ему объект опций, как показано ниже:

{   
"plugins": [
["transform-async-to-module-method", {
"module": "bluebird",
"method": "coroutine"
}]
]
}

Babel 7 внес несколько изменений в опции, такие как loose для некоторых плагинов, и добавил несколько новых опций для других плагинов.

 

 

«Чистая» аннотация

Теперь, когда Babel транслирует класс ES6, он аннотирует переданный класс с / * # _ PURE _ * / comment. Это сообщает минифаерам типа Uglify, то, что называется Dead Code Elimination.

var C =
/*#_PURE_*/
function () {
// code
}();

 

 

Поддержка TypeScript

С помощью хороших людей в TypeScript, Babel теперь понимает синтаксис TypeScript, с помощью нового пакета @ babel / preset-typescript.

Поэтому, если вы используете TypeScript для написания чего-то такого:

interface Hero {
name: string;
}
function Heroes(hero: Hero) {
return "I am " + hero.name;
}

 Babel транспилирует это в:

function Heroes(hero) {
return "I am " + hero.name;
}

 

 

JSX Fragment

React 16  представил Fragment, который помогает нам возвращать несколько дочерних элементов из метода render компонента без использования элемента div в качестве родителя.

render() {   
return (
<>
<li>Aquaman</li>
<li>The Flash</li>
<li>Wonder Woman</li>
</>
);
}

Babel также поддерживает эту фичу

render() {
return React.createElement(
React.Fragment,
null,
React.createElement(
"li",
null,
"Aquaman"
),
React.createElement(
"li",
null,
"The Flash"
),
React.createElement(
"li",
null,
"Wonder Woman"
)
)
}

 

Автоматические полифиллы

Полифиллы важны для JavaScript, поскольку они позволяют нам использовать другие функции, такие как Promises и Symbols, в среде, которые даже не поддерживают их. Таким образом, Babel может сделать больше, чем просто изменить синтаксис нашего кода. Он может реализовывать встроенные функции и объекты.

 

Макросы

Babel начал как транспилятор кода ES6 для ES5. Но сегодня это намного больше. Существуют сотни плагинов, которые могут использоваться для конкретных библиотек и использовать случаи, чтобы улучшить общую производительность нашего приложения.

Но добавление этих плагинов в наше приложение — это легче сказать, чем сделать. Например, если вы создали приложение React с помощью инструмента create-react-app, то вы не сможете использовать эти плагины. Кроме того, вы, как разработчик, должны знать все о плагине и о том, как он изменит код вашего приложения после создания приложения.

Быстрое решение этого — установить пакет babel-plugin-macros в вашем приложении. Этот пакет не только заботится о настройке вашего кода для совместимости с плагином, но и упрощает создание пользовательских преобразований для сценариев, специфичных для вашего приложения.

 

Caller

В пакете @ babel / core также есть новая опция, называемая вызывающим, которая позволит нам передавать любые метаданные нашим пресетам и плагинам.

babel.transform("code;", {   
filename,
presets: ["@babel/preset-env"],
caller: {
name: "babel-loader",
supportsStaticESM: true,
},
});

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

 

Выводы 

Если вам интересно, почему новое обновление Babel это так важно, подумайте о том, что на сегодняшний день в GitHub существует более 1 миллиона репозиториев, которые зависят только от базового модуля babel. Рамки и библиотеки, такие как компании React и Vue и гиганты, такие как Netflix и Facebook, используют Babel в своих проектах на уровне производства.

Надеемся увидеть еще много замечательных обновлений от команды в Babel!

Комментарии (0)

Добавить комментарий

Войдите, чтобы написать о чем-нибудь...
Вход Регистрация
Web.onRails
Здесь вы можете спросить или написать обо всём, что касается Веб-разработки.
написать о чем-нибудь...
Метки:
Лучшее
[52]
16 Окт 2011, 15:38
Вывести все элементы POST
[просмотров 1205]
[49]
17 Сен 2011, 15:13
FileZilla перетаскивание файлов
[просмотров 1125]
[74]
31 мая 2011, 11:48
Python проверка существования переменной
[просмотров 1081]
[58]
29 мая 2012, 12:08
Узнать версию PHP из командной строки
[просмотров 1080]
[315]
16 Июл 2011, 20:03
Python работа с MySQL
[просмотров 1073]
[2]
26 Июн 2018, 23:10
Как в React сделать поле input file с кнопкой?
[просмотров 991]
[119]
21 Июл 2011, 14:04
Python Imaging Library (PIL)
[просмотров 984]