BabelJS - Настройка проекта с использованием Babel 7

Последняя версия Babel, 7 выпущена с изменениями в уже существующих пакетах. Часть установки остается такой же, как и для Babel 6. Единственная разница в Babel 7 заключается в том, что все пакеты должны быть установлены с@babel/, например @ babel / core, @ babel / preset-env, @ babel / cli, @ babel / polyfill и т. д.

Вот настройка проекта, созданная с помощью babel 7.

Команда

Выполните следующую команду, чтобы начать настройку проекта -

npm init

Установите следующие пакеты

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

Вот созданный package.json -

Теперь создадим .babelrc файл в корневой папке -

Создать папку src/ и добавить файл main.js к нему и напишите свой код для переноса в es5.

src / main.js

let add = (a,b) => {
   return a+b;
}

команда транспилировать

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

main_es5.js

"use strict";

var add = function add(a, b) {
   return a + b;
};

Работа Babel 7 остается такой же, как и Babel 6. Единственное отличие - установка pacakge с @babel.

В babel 7 есть несколько устаревших пресетов. Список выглядит следующим образом:

Пресеты ES20xx
babel-preset-env
babel-preset-latest
Предустановки сцены в Babel

Также год из пакетов удален - @babel/plugin-transform-es2015-classes сейчас @babel/plugin-transform-classes

Мы увидим еще один пример работы с машинописным текстом и перенесем его в JavaScript Es2015 с использованием предустановки машинописного текста и babel 7.

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

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

Создайте test.ts файл в src/ папку и напишите код в машинописном виде -

test.ts

let getName = (person: string) => {
   return "Hello, " + person;
}

getName("Siya");

.babelrc

команда

npx babel src/test.ts --out-file test.js

test.js

"use strict";

var getName = function getName(person) {
   return "Hello, " + person;
};

getName("Siya");