Как настроить babel 7 и nodemon с помощью Node Js

Что такое babel и зачем он нам нужен.

Babel — это инструмент, который используется для преобразования кода ECMAScript 2015+ в обратно совместимую версию JavaScript, чтобы старые браузеры и среда могли понимать ваш код.

Javascript сильно изменился за последние несколько лет, добавив новый синтаксис и функции, которые не полностью поддерживаются в старых браузерах и средах. Поэтому, чтобы мы могли использовать этот новый синтаксис и функции в нашей разработке, нам нужно найти способ заставить этот старый браузер понимать эти новые синтаксисы.
Здесь на помощь приходит Babel. Babel берет наш код, написанный на более высоком стандарте, и преобразует его в стандарт, понятный старым браузерам.

В этом руководстве я покажу вам, как настроить проект узла с помощью Babel 7, который является последней версией Babel, чтобы вы могли использовать современный синтаксис javascript.

Настройка проекта

Создайте папку для своего проекта и выполните следующую команду.

 npm int

Это инициализирует ваш проект и создаст для вас файл package.json.

В этом руководстве мы добавим файл index.js в корень приложения, и это будет наша точка входа. Теперь наш файловый каталог должен выглядеть так.

  your-project-folder
  |--index.js
  |--package.json

Установка пакетов

Затем мы добавим в наш проект несколько пакетов babel с помощью приведенной ниже команды.

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

Они соответственно заботятся об общей работе babel, использовании babel в командной строке, возможности использовать новейшие функции JS и использовании babel с node.

Помимо добавления пакетов babel, мне всегда нравится использовать nodemon в моей среде разработки. nodemon — это инструмент, который помогает разрабатывать приложения на основе node.js, автоматически перезапуская приложение узла при обнаружении изменений файлов в каталоге. мы можем добавить nodemon в наш проект, используя приведенную ниже команду.

 npm install --save-dev nodemon

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

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

Добавление скриптов в package.json

Наконец, нам нужно добавить команду в наш package.json для запуска нашего приложения.

"start": "nodemon --exec babel-node index.js",

Наш pacakge.json теперь будет выглядеть так.

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon --exec babel-node index.js ",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "
  },
  "dependencies": {
  },
  "devDependencies": {
    "@babel/cli": "^7.1.5",
    "@babel/core": "^7.1.6",
    "@babel/node": "^7.0.0",
    "@babel/preset-env": "^7.1.6",
    "nodemon": "^1.18.6"
  }
}

Поздравляю с попаданием сюда. Теперь у вас есть Babel 7, правильно настроенный с помощью nodemon, и вы готовы писать современный синтаксис javascript.