Как настроить Babel 7 и Nodemon с узлом JS

Что такое Babel и почему нам это нужно.

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

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

В этом руководстве я покажу вам, как настроить проект узла с 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

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

Помимо добавления пакетов 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",

Ваш Package.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": "https://github.com/sccofield/my-app/issues"
  },
  "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.

Что такое Babel и почему нам это нужно.

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

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

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

Читайте ещё по теме: