BabelJS — Babel Presets

Предустановки Babel — это подробности конфигурации для babel-транспортера, говорящего ему о том, чтобы переносить его в указанном режиме. Вот некоторые из самых популярных пресетов, которые мы собираемся обсудить в этой главе:

• ES2015
• Env
• реагировать

Нам нужно использовать предустановки, в которых есть среда, в которую мы хотим преобразовать код. Например, пресет es2015 преобразует код в es5 . Предустановка со значением env также преобразуется в es5 . Он также имеет дополнительную функцию, т. Е. Опции. Если вы хотите, чтобы эта функция поддерживалась в последних версиях браузеров, babel преобразует код, только если в этих браузерах нет поддержки функций. С Preset реагировать , Babel передаст код, когда реагировать.

Для работы с пресетами нам нужно создать файл .babelrc в корневой папке нашего проекта. Чтобы показать работу, мы создадим настройки проекта, как показано ниже.

команда

npm init

Мы должны установить необходимые предварительные настройки Babel следующим образом вместе с Babel Cli, Babel Core и т. Д.

Бабель 6 пакетов

npm install babel-cli babel-core babel-preset-es2015 --save-dev

Бабель 7 пакетов

npm install @babel/cli @babel/core @babel/preset-env --save-dev

Примечание — babel-preset-es2015 устарела babel 7 и выше.

es2015 или @ babel / env

Создайте файл .babelrc в корне проекта (babel 6) —

В .babelrc предустановками является es2015. Это указание компилятору babel, что мы хотим, чтобы код был преобразован в es2015.

Для babel 7 нам нужно использовать пресеты следующим образом:

{
   "presets":["@babel/env"]
}

Вот пакет .json после установки —

Поскольку мы установили babel локально, мы добавили команду babel в раздел скриптов в package.json.

Давайте поработаем над простым примером проверки транспилирования с помощью предустановки es2015.

пример

main.js

let arrow = () => {
   return "this is es6 arrow function";
}

Транспортируется в es5, как показано ниже.

команда

npx babel main.js --out-file main_es5.js

main_es5.js

"use strict";

var arrow = function arrow() {
   return "this is es6 arrow function";
};

Env

Используя предустановку Env, вы можете указать среду, в которую будет передаваться финальный код.

Мы собираемся использовать ту же настройку проекта, созданную выше, и изменить пресеты с es2015 на env, как показано ниже.

Кроме того, нам нужно установить babel-preset-env. Мы выполним приведенную ниже команду, чтобы установить то же самое.

команда

npm install babel-preset-env --save-dev

Мы снова скомпилируем main.js и увидим вывод.

main.js

let arrow = () => {
   return "this is es6 arrow function";
}

команда

npx babel main.js --out-file main_env.js

main_env.js

"use strict";

var arrow = function arrow() {
   return "this is es6 arrow function";
};

Мы видели, что переданный код — это es5. Если мы знаем среду, в которой будет выполняться наш код, мы можем использовать эту предустановку, чтобы указать ее. Например, если мы указываем браузеры как последнюю 1 версию для chrome и firefox, как показано ниже.

команда

npx babel main.js --out-file main_env.js

main_env.js

"use strict";

let arrow = () => {
   return "this is es6 arrow function";
};

Теперь мы получаем синтаксис функции стрелки как есть. Он не переносится в синтаксис ES5. Это потому, что среда, которую мы хотим, чтобы наш код поддерживал, уже имеет поддержку функции стрелки.

Babel заботится о компиляции кода на основе среды, используя babel-preset-env. Мы также можем настроить компиляцию на основе среды nodejs, как показано ниже.

Окончательная компиляция кода показана ниже.

команда

npx babel main.js --out-file main_env.js

main_env.js

"use strict";

let arrow = () => {
   return "this is es6 arrow function";
};

Babel компилирует код в соответствии с текущей версией nodejs.

React Preset

Мы можем использовать предустановки реагирования, когда мы используем Reactjs. Мы будем работать на простом примере и использовать предустановки реагирования, чтобы увидеть результат.

Чтобы использовать пресет, нам нужно установить babel-preset-response (babel 6) следующим образом:

npm install --save-dev babel-preset-react

Для Вавилона 7 это выглядит следующим образом —

npm install --save-dev @babel/preset-react

Изменения в .babelrc следующие для babel6 —

Для Бабель 7

{
   "presets": ["@babel/preset-react"]
}

main.js

<h1>Hello, world!</h1>

команда

npx babel main.js --out-file main_env.js

main_env.js

React.createElement(
   "h1",
   null,
   "Hello, world!"
);

Код из main.js преобразуется в синтаксис реагировать с помощью preset: реагировать.