Иногда сложно понять, как некоторые настройки были выполнены другими разработчиками, особенно для таких новичков, как я. Мне было сложно настроить среду 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-приложения. Вы можете скопировать следующий код
И это подводит нас к финалу. Надеюсь, эта статья была полезной.