Почти каждый, кто начал изучать ReactJS, знакомился с create-react-app, который является отличным способом запуска любого проекта ReactJS. Мы были довольны этим, так как вы можете просто запустить простую команду, а затем разработка вашего приложения ReactJS готова. Но в какой-то момент вашей карьеры вам захочется настроить все с нуля, чтобы оно соответствовало определенной цели. Итак, в этом уроке мы будем настраивать наши собственные reactjs с нуля, используя webpack и babel, так что берите ручку и бумагу, давайте покрутим колесо обучения.

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

Прежде чем приступить к работе, убедитесь, что на вашем компьютере установлены редактор и терминал. Кроме того, вам понадобится установленная версия node with npm. Убедитесь, что все настроено, прежде чем продолжить чтение.

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

mkdir webpack-babel-react-starter
cd webpack-babel-react-starter

Нам нужно инициализировать наш проект файлом package.json, так как мы собираемся установить некоторые пакеты, необходимые для установки. Просто запустите yarn init -y

В этом уроке я буду использовать пряжу в качестве диспетчера пакетов. Если вы используете npm, убедитесь, что вы запустили соответствующую команду, она должна работать как положено.

Настройка веб-пакета

Webpack — один из самых популярных упаковщиков. Он внутренне строит граф зависимостей при обработке вашего приложения, этот граф отображает каждый модуль, который нужен вашему проекту, и генерирует один или несколько пакетов. Начиная с версии 4.0.0, веб-пакету не требуется файл конфигурации для сборки вашего проекта, тем не менее, он невероятно настраивается, чтобы лучше соответствовать вашим потребностям.

давайте установим его, запустив:

yarn add webpack --dev

Нам также нужно установить webpack cli

yarn add webpack-cli --dev

После установки этих двух пакетов вы заметите новое дополнение в нашем проекте, разделы node_modules и devDependencies в нашем файле package.json.

Следующее, что нужно сделать, это добавить только что установленный веб-пакет в файл package.json.

"scripts": {
  "build": "webpack --mode production"
}

На данный момент вам не нужен файл конфигурации для начала работы, что является отличным дополнением к webpack 4.

Настройка Вавилона

Современный javascript написан на ES6 или ES7, но не каждый браузер понимает этот современный javascript, именно на данном этапе нам нужен Babel, чтобы сделать за нас тяжелое освещение. Babel — это цепочка инструментов, которая в основном используется для преобразования кода ECMAScript 2015+ в обратно совместимую версию JavaScript в текущих и более старых браузерах или средах. Проверьте там документы для получения дополнительной информации о том, что они могут сделать для вас.

Компоненты React в основном написаны на ES6 с концепцией импорта, классом и другими функциями ES6+, которые старые браузеры не понимают. Webpack сам по себе не знает, как преобразовать или еще лучше преобразовать код ES6 в код ES5. Но это надежда для нас, у веб-пакета есть эта концепция загрузчиков, загрузчик веб-пакета принимает что-то на входе и производит что-то еще на выходе.

Для нашей установки мы будем использовать babel-loader, который представляет собой загрузчик веб-пакетов, который будет транспилировать для нас наш код ES6. Прежде чем мы начнем использовать babel-loader, нам нужно установить некоторые пакеты и настроить предустановленную среду babel, которая будет нацелена на конкретную версию javascript, в которую мы хотим транспилировать.

давайте установим все зависимости:

yarn add @babel/core @babel/preset-env @babel/preset-react babel-loader --dev

Нам также нужно настроить наш конфигурационный файл babel, создать новый файл в корневом каталоге с именем .babelrc и записать в него следующую конфигурацию.

{
  "presets": ["@babel/env", "@babel/react"]
}

Приведенная выше конфигурация гарантирует, что babel преобразует наш код реакции, то есть JSX и любой другой код ES6+, который у нас есть, в код ES5.

Сейчас самое подходящее время для создания минимальной конфигурации веб-пакета для нашего проекта. Создайте файл webpack.config.js в корневом каталоге и напишите для него следующую конфигурацию

module.exports = {
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
}

Что делает приведенная выше конфигурация, так это то, что для каждого файла с расширением js или jsx, за исключением папки node_modules и ее содержимого, webpack использует babel-loader для переноса кода ES6 в ES5.

Сделав это, давайте перейдем к написанию нашего реагирующего компонента.

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

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

yarn add react react-dom

После их установки создайте новую папку в корневом каталоге, назовем ее src внутри нее создайте файл index.js

В файле index.js напишите следующий код:

import React from "react";
import ReactDOM from "react-dom";
const Index = () => {
  return (
    <div className="full-screen">
      <div>
        <h1>
          React Page {" "}
        </h1>
        <br />
        <a
          className="button-line"
          href="https://github.com/deityhub"
          target="_blank"
        >
          Know more
        </a>
      </div>
    </div>
  );
};
export default Index;

Пришло время все проверить и посмотреть, насколько мощным является webpack. Откройте свой терминал еще раз и запустите

yarn run build

В случае успеха вы должны увидеть папку dist, созданную для нас веб-пакетом, а внутри нее находится файл index.js с уменьшенной версией нашего кода ES5. Почему код минимизирован, если вы помните, в нашем скрипте сборки в package.json мы указали флаг --mode production после команды webpack, под капотом webpack сгенерирует минимизированную версию нашего кода ES5. Чтобы увидеть читаемый формат транспилируемого кода, вы можете поменять местами --mode production на --mode development

Yay!, результат был отличным, но это не то, что мы действительно хотим для нашего приложения для реагирования, мы хотим, чтобы наш транспилированный код был виден в нашем браузере. Итак, давайте настроим html, а также css(scss) для работы с нашим веб-пакетом.

Подключение компонента React к DOM

Нам нужно настроить html-файл, чтобы наш компонент реакции мог отображаться на dom, но мы не можем просто создать случайный html-файл и подключить к нему нашу реакцию с помощью dom. Итак, для этого нам нужно установить пакет html-webpack-plugin

yarn add html-webpack-plugin --dev

Настройте файл webpack.config.js так, чтобы он выглядел следующим образом.

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path: path.join(__dirname, "build"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: path.join(__dirname, "src", "index.html")
    })
  ]
};

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

Далее нужно создать файл html внутри папки src, назовем его index.html, а затем вставить в него следующий код.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>React, Webpack, Babel Starter Pack</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <!-- your react app will render here -->
    <div id="app"></div>
  </body>
</html>

Поскольку мы находимся в src, давайте внесем некоторые коррективы в наш компонент реагирования, сначала мы создадим новую папку components, затем внутри этой папки два файла app.js и app.scss, а затем внесем следующие коррективы в наш код:

In ./src/index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/app";
ReactDOM.render(<App />, document.getElementById("app"));

In ./src/components/app.js

import React from "react";
import "./app.scss";
const App = () => {
  return (
    <div className="full-screen">
      <div>
        <h1>
          React Page {" "}
        </h1>
        <br />
        <a
          className="button-line"
          href="https://github.com/deityhub"
          target="_blank"
        >
          Know more now
        </a>
      </div>
    </div>
  );
};
export default App;

In ./src/components/app.scss

body {
  background: linear-gradient(253deg, #0cc898, #1797d2, #864fe1);
  background-size: 300% 300%;
  -webkit-animation: Background 25s ease infinite;
  -moz-animation: Background 25s ease infinite;
  animation: Background 25s ease infinite;
}
.full-screen {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url("../../assests/image/background.png");
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  / works with row or column /
  flex-direction: column;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-align: center;
}
h1 {
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  font-size: 4em;
  letter-spacing: -2px;
  text-align: center;
  text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.6);
  &:after {
    display: block;
    color: #fff;
    letter-spacing: 1px;
    font-family: "Poiret One", sans-serif;
    content: "React project powered by webpack and babel with support for sass";
    font-size: 0.4em;
    text-align: center;
  }
}
.button-line {
  font-family: "Open Sans", sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  text-align: center;
  font-size: 1.4em;
  opacity: 0.8;
  padding: 20px 40px;
  text-decoration: none;
  transition: all 0.5s ease;
  margin: 0 auto;
  display: block;
  &:hover {
    opacity: 1;
    background-color: #fff;
    color: grey;
  }
}
@-webkit-keyframes Background {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@-moz-keyframes Background {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes Background {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

Мы добавим некоторые стили в дополнение к html и компоненту реагирования, который мы будем отображать в dom. Поэтому, прежде чем мы запустим наш код для его тестирования, нам нужно настроить наш веб-пакет, чтобы он знал, как обрабатывать любой файл .css или .scss, проходящий через него.

yarn add css-loader sass-loader mini-css-extract-plugin node-sass --dev

Установленный здесь файл sass-loader используется webpack для преобразования нашего файла .scss в файл .css, понятный браузеру, и внутри он использует node-sass для достижения этой цели. Затем mini-css-extract-plugin, как следует из названия, абстрагирует все наши css-файлы в один css-файл вместо обычного поведения, которое предлагает веб-пакет, который заключается в объединении вашего css-файла с окончательным выходным файлом .js, который затем вставляет css в ваш визуализированный HTML-выход. когда вы запускаете код.

Откройте файл конфигурации веб-пакета и настройте свой код так, чтобы он выглядел следующим образом.

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  entry: path.join(dirname, "src", "index.js"),
  output: {
    path: path.join(dirname, "build"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /.(css|scss)$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: path.join(__dirname, "src", "index.html")
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

Здесь следует отметить, что порядок ваших загрузчиков в конфигурационном файле веб-пакета имеет большое значение, потому что веб-пакет обрабатывает загрузчики справа налево. Например, используя тест для файлов css, он сначала запустит sass-loader, затем css-loader и, наконец, MiniCssExtractPlugin.

Есть еще одна вещь, которую нужно сделать, давайте установим сервер разработки webpack, это создаст для нас сервер разработки и будет отслеживать наши файлы на предмет любых изменений во время разработки.

yarn add webpack-dev-server --dev

Затем откройте файл package.json и внесите следующие изменения в тег scripts.

"scripts": {
    "start": "webpack --mode development",
    "dev": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  }

Это слишком много кода, так что давайте проверим наш код, запустив yarn run dev

если все прошло хорошо, вы должны увидеть что-то подобное в своем браузере.

Последние штрихи

Если вы следовали этому руководству шаг за шагом, я совершенно уверен, что вы в конечном итоге узнаете и освоите использование webpack и babel. В будущем я хочу, чтобы мы добавили еще две функции в этот проект, просто чтобы продемонстрировать, что вы можете расширить или добавить больше функций завтра при работе над более продвинутым проектом реагирования, чем этот.

Откройте свой терминал и установите эти пакеты

yarn add file-loader @babel/plugin-proposal-class-properties --dev

file-loader будет обрабатывать все сценарии, в которых мы хотим импортировать изображение, svg или даже gif, в то время как @babel/plugin-proposal-class-properties будет обрабатывать компоненты реактивного класса и статические свойства класса.

В webpack.config.js настройте его так, чтобы он выглядел так

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  entry: path.join(dirname, "src", "index.js"),
  output: {
    path: path.join(dirname, "build"),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /.(css|scss)$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
      },
      {
        test: /.(jpg|jpeg|png|gif|mp3|svg)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[path][name]-[hash:8].[ext]"
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: path.join(__dirname, "src", "index.html")
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
  ]
};

В файле .babelrc также настройте его так, чтобы он выглядел так

{
  "presets": ["@babel/env", "@babel/react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

Наконец, запустите yarn run dev, чтобы убедиться, что все работает.

Вывод

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

Первоначально опубликовано на scotch.io