Иногда сложно понять, как некоторые настройки были выполнены другими разработчиками, особенно для таких новичков, как я. Мне было сложно настроить среду Node js для использования синтаксиса ES6. После нескольких попыток и ошибок я наконец получил это.

Если вы попытаетесь запустить приложение Node js с синтаксисом ES6, вы столкнетесь с такой ошибкой.

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

Давайте приступим к делу!

В своем терминале или консоли вы можете выполнить следующую команду.

npm init -y

Вавилон позволяет нам преобразовывать коды (синтаксис) ES6 (ECMAScript 2015+) в обратно совместимые версии Javascript, которые могут выполняться старыми механизмами Javascript.

Прежде всего, мы установим три основных пакета.

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

Вы заметили, что мы добавили в установку «- save-dev». Это потому, что это DevDependencies, поэтому они нам нужны только во время разработки (например, для компиляции).

  • @ Babel.preset-env позволяет нам указать среду, после чего автоматически включает необходимые плагины.
  • @ Babel / node - это интерфейс командной строки (CLI), который работает так же, как Node CLI, с дополнительным преимуществом, таким как компиляция с предустановками и плагинами Babel перед запуском
  • @ Babel / core - интерфейс приложения (API) Babel.

Далее мы установим Nodemon. Эта зависимость автоматически перезапустит наше приложение, когда обнаружит изменения файла при сохранении. Вы можете установить его глобально в своей системе или как DevDependency.

npm install --save-dev nodemon

or

npm install -g nodemon

Двигаясь дальше, мы проверим это, создав простое приложение Express. Моя структура папок выглядит как на картинке ниже. Не беспокойтесь о .babelrc, мы сразу займемся этим!

В package.js мы настроим «запуск» в скрипте. Это позволяет нам запустить, просто написав

npm start

Если вы правильно установили все пакеты, ваш package.json должен выглядеть так:

Теперь в .babelrc мы можем установить для нашего пресета значение @ babel / preset-env, как показано ниже.

Чтобы протестировать наше приложение, я написал простой код Express-приложения. Вы можете скопировать следующий код

И это подводит нас к финалу. Надеюсь, эта статья была полезной.