Настройка 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]) так что я обновлю этот пост в блоге, спасибо.