Настройте свое приложение React с помощью Webpack 4, Babel и сервера Nodejs (ЧАСТЬ 1)

Сегодня я собираюсь объяснить, как я использую babel для настройки проекта с поддержкой ES6 при работе в узле, и как можно использовать webpack при работе с React.

В этом установочном приложении нам, очевидно, потребуется установить узел вместе с npm (или yarn) — установка для этого выходит за рамки этого руководства. Чтобы установить nodejs, перейдите по ссылке на этот учебник. Как установить нодджс.

Чтобы убедиться, что у вас установлены node и npm, запустите эту команду на своем терминале. node -v, npm -v

Далее мы создадим пустой проект для этого приложения установки и перейдем к нему.

mkdir setup_application
cd setup_application

Далее мы будем использовать npm init Команда для создания файла package.json для вашего приложения. Эта команда запрашивает у вас ряд вещей, включая имя и версию вашего приложения, а также имя исходного файла точки входа (по умолчанию это index.js). Пока просто примите значения по умолчанию.
Для быстрой настройки используйте

npm init -y

Если вы отображаете файл package.json cat package.jsonвы увидите значения по умолчанию, которые вы приняли, заканчивая лицензией.

{
  "name": "setup_application",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Далее мы установим Выражать в приложение.

npm install express --save

Далее мы создадим файл записи, в котором мы настроим наш экспресс-сервер для прослушивания порта. 8000.

const express = require('express');
const path = require('path');

const app = express();

app.get('*', (req, res) => {
  return res.send('Welcome to our setup application');
});

const { log } = console;

const PORT = 8000;

app.listen(PORT, () => {
  log('Server started on port: ', PORT);
});

Установка Вавилона

Babel позволяет вам писать свой код на JavaScript версии ES6 (ES2015) и выше, которая еще не поддерживается в большинстве браузеров. С Babel код будет перенесен обратно в ванильный JavaScript, чтобы каждый браузер, не имея всех реализованных функций JavaScript ES6 и выше, мог его интерпретировать. Чтобы Babel заработал, вам нужно установить две его основные зависимости.

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