BabelJS - интерфейс командной строки

Babel поставляется со встроенным интерфейсом командной строки, который можно использовать для компиляции кода.

Создайте каталог, в котором вы будете работать. Здесь мы создали каталог с именем babelproject . Давайте использовать nodejs для создания деталей проекта.

Мы использовали npm init для создания проекта, как показано ниже -

Вот созданная нами структура проекта.

Теперь для работы с Babel нам нужно установить Babel cli, пресет Babel, ядро ​​Babel, как показано ниже -

Babel-Cli

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

npm install --save-dev babel-cli

babel-preset

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

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

вавилон

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

npm install --save-dev babel-core

После установки подробности доступны в package.json -

Мы установили плагины babel локально для проекта. Это сделано для того, чтобы мы могли по-разному использовать babel в наших проектах в зависимости от требований проекта, а также различных версий babeljs. Package.json предоставляет сведения о версии используемых babeljs.

Чтобы использовать babel в нашем проекте, нам нужно указать то же самое в package.json следующим образом:

Babel в основном используется для компиляции кода JavaScript, который будет иметь обратную совместимость. Теперь мы напишем наш код в ES6 -> ES5 или ES7 -> ES5, а также в ES7-> ES6 и т. Д.

Чтобы предоставить инструкции Babel по этому же поводу, во время выполнения нам нужно создать файл с именем .babelrc в корневой папке. Он содержит объект json с деталями предустановок, как показано ниже -

Мы создадим файл JavaScript index.js и скомпилируем его в es2015 с помощью Babel. Перед этим нам нужно установить пресет es2015 следующим образом:

В index.js мы создали функцию, используя функцию стрелки, которая является новой функцией, добавленной в es6. Используя Babel, мы скомпилируем код в es5.

Для выполнения на es2015 используется следующая команда -

npx babel index.js

Выход

Он отображает код index.js в es5, как показано выше.

Мы можем сохранить вывод в файле, выполнив команду, как показано ниже -

npx babel index.js --out-file index_es5.js

Выход

Вот созданный нами файл index_es5.js -