Как настроить babel для узла (просто)

Хорошо, если вы хотите настроить проект с нуля и хотите использовать все классные функции из babel и синтаксис es6 по умолчанию, ваш код не сможет понять этот синтаксис, поэтому сначала мы должны использовать babel, babel действует как «переводчик».

Оригинальная статья здесь

Шаг 0

Настройте свою среду

Прежде всего, вы должны создать папку проекта и внутри папки
инициализировать нпм

Убедитесь, что у вас есть узелочевидно,

npm init

следующий и следующий, и вы сделали

ПРИМЕЧАНИЕ: Ваш тестовый код может быть любым. этот образец будет следовать структуре источник/index.js куда index.js это ваш код.

Шаг 1
Установить dev-зависимости

babel-cli
babel-register
babel-preset-es2015
babel-presets-stage-2

ПРИМЕЧАНИЕ: чтобы использовать асинхронный а также Ждите нам нужно еще 2 дополнительных модуля
Это полезно, если вы собираетесь использовать некоторые пакеты, такие как редукс-саги,

babel-core
babel-polyfill

Установите его как зависимости Dev

npm install babel-cli babel-register babel-preset-es2015 babel-preset-stage-2 babel-core babel-polyfill --save-dev

Шаг 2

Настройка бабеля

Сделать файл .babelrc

touch .babelrc

и туда добавить конфигурацию babel

{
  "presets": ["es2015", "stage-2"]
}

Шаг 3

Настройка среды

Создайте папку, в которой мы собираемся хранить как рабочие файлы, так и файлы разработки, а также конфигурацию.

mkdir bin

а теперь создайте файлы env и prod

touch env
touch prod

И в prod мы собираемся импортировать наши файлы из babel

require('babel-register')
require("babel-core/register");
require("babel-polyfill"); // If you use async and await
// This us where our main application index path is
require('../src/index');

На этом этапе вы должны иметь возможность запустить код, набрав

node bin/dev

И ваш код должен работать нормально.

Шаг 4

Сделать скрипты для запуска кода

Хорошо, теперь мы готовы автоматизировать это с помощью скриптов npm,
поэтому мы должны создать как 2 новых сценария, так и начать встраивать их в наш пакет.json

"scripts": {
    "start": "node bin/dev",
    "build": "mkdir dist && babel src -s -d dist",
    "dev": "nodemon --exec npm run babel-node -- ./index.js",
    "lint": "eslint"
  },

Это запустит приложение, используя предыдущую команду node.

"start": "node bin/dev"

И это создаст новую папку с именем dist

"build": "mkdir dist && babel src -s -d dist",

Я стараюсь сделать это как можно проще, если у вас есть какие-либо вопросы, пожалуйста, оставьте комментарий.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *