Настройка Babel для компиляции кодов es6 + Javascript в обратно совместимую версию JavaScript в текущих и старых браузерах или средах, вероятно, самая простая вещь, с которой я столкнулся как разработчик. Однако мне потребовалось время, чтобы осознать это, и это было связано с тем, что Babel - это не просто пакет, который вы подключаете к своему проекту, и он начинает воспроизводиться, но вам действительно нужно собрать несколько пакетов вместе, чтобы заставить его работать, зная правильные пакеты. выбор может сбивать с толку. В этом сообщении в блоге я бы объяснил, как вы можете настроить Babel, чтобы помочь вам скомпилировать ваши коды Javascript es6, es7, es8 и т. Д. В версии Javascript, которые могут работать без ошибок во время выполнения NodeJS.
Как я сказал ранее, для того, чтобы Babel заработал, нужно получить пару пакетов от npm
, так что приступим. Первый пакет, который мы будем устанавливать, - это babel-core
. Это движок babel, но он ничего не может делать сам по себе, ему нужны другие пакеты, чтобы помочь ему.
Запустите
npm install @babel/core --save
, чтобы установить babel-core
Второй пакет, который мы собираемся установить, - это babel-cli
. Этот пакет гарантирует, что мы можем использовать Babel из командной строки, и, поскольку мы работаем в среде узла, нам это обязательно понадобится.
Запустите
npm install @babel/cli --save
, чтобы установить babel-cli
Вы можете включить сценарий babel в раздел сценариев вашего package.json
следующим образом:
"scripts": { ... "babel": "./node_modules/.bin/babel", ... }
Это поможет нам избежать ввода длинных и запутанных команд в интерфейсе командной строки каждый раз, когда мы хотим скомпилировать.
Тестирование
Теперь, с этими двумя пакетами, мы действительно можем что-то сделать с babel, просто чтобы почувствовать, что такое babel, однако никакого преобразования пока не произойдет.
Создайте test.js
file и напишите в нем несколько кодов JavaScript es6, затем перейдите в командную строку и запустите
npm run babel test.js -- --out-file compiledTest.js
Вы должны увидеть новый compiledTest.js
файл, и этот файл будет содержать то же самое, что вы написали в test.js
, так что компиляции не было, но Babel работает.
Команда, которую мы выполнили выше, просто говорит Babel скомпилировать test.js
файл в выходной файл с именем compiledTest.js
. Если вам нужно скомпилировать файлы в каталоге, просто выполните:
npm run babel ./path/to/sourceCodes --out-dir ./path/to/destination
Итак, чтобы Babel выполнил фактическую компиляцию, нам нужно установить некоторые плагины, помогающие ядру babel. Правда в том, что babel ничего не делает сам, он использует установленные плагины для выполнения своей магии. Чтобы мы могли компилировать коды es6 +, мы должны установить предустановку env
Запустите
npm install @babel/preset-env --save
, чтобы установитьenv
предустановку
Подождите, разве я не говорил, что Babel нужны плагины, так что, черт возьми, предустановлено? Ну, пресет - это просто группа плагинов, так что я прав, babel нужен плагин или плагин S.
Предустановка env
- это группа плагинов, которые помогают компилировать современные / будущие версии JavaScript (ES2015, ES2016 и т. д.) в поддерживаемую в настоящее время версию javascript.
После установки этого пакета нам нужно сообщить Babel,
Привет, парень, я только что установил набор плагинов, которые ты должен использовать для моей компиляции.
Мы бы сделали это, создав файл .babelrc
, и этот файл будет содержать этот фрагмент
{ "presets" : [ "@babel/env" ] }
Теперь перейдите в командную строку и попробуйте снова скомпилировать наш test.js
файл.
Если файл compiledTest.js
после завершения компиляции содержит версию es5 файла test.js
, то это все; мы только что настроили babel, но если это не так, вы можете проверить, все ли было хорошо с самого начала.
Просто для подтверждения, ваша файловая структура должна быть примерно такой:
|- node_modules |- package.json |- test.js |- compiledTest.js |- .babelrc
Компиляция на лету
Иногда вам не нужно сначала компилировать все свои коды перед их выполнением; вы просто хотите, чтобы компиляция и выполнение происходили одновременно. Для этого вы должны использовать команду babel-node. Эта команда поставляется с пакетом babel-cli
и аналогична замене команды node
. Поэтому вместо того, чтобы делать что-то вроде этого node ./path/to/file
для запуска вашего файла, вы должны сделать babel-node ./path/to/file
, чтобы скомпилировать и запустить файл одновременно.
Обратите внимание, что babel-node по умолчанию отсутствует в вашей командной строке, поэтому вам может потребоваться изменить раздел сценария вашего package.json
, чтобы включить
"scripts": { ... "babel-node": "./node_modules/.bin/babel-node", ... }
И запустите свой файл так:
npm run babel-node ./path/to/file
Заключение
Я написал / обновил это сообщение в блоге с помощью babel-core в версии 7.2.0, если вы обнаружите, что babel внес некоторые критические изменения в процесс настройки в некоторых более поздних версиях, вы можете сообщить мне ([email protected]) так что я обновлю этот пост в блоге, спасибо.