Руководство по настройке реагировать с нуля, без использования create-react-app и путем ручной настройки webpack и babel.

Содержание

Зачем нам нужен веб-пакет?

Если вы написали код реакции, вы бы знали, что он требует написания большого количества файлов javascript и импорта этих файлов в другие файлы. Мы делаем это с помощью какой-то модульной системы, две самые популярные модульные системы - это CommonJS require() и ESM import. К сожалению, браузеры не поддерживают CommonJ, а поддержка ESM еще не универсальна. Итак, нам нужен инструмент, который может взять все файлы, которые мы написали, и объединить / связать их в один файл js, отслеживая их зависимости. Инструмент, который делает это, называется сборщиками, а webpack - один из многих сборщиков javascript!
Узнайте больше о webpack.

Хорошо, но почему Babel?

Хороший вопрос! Ответ на этот вопрос также имеет похожую (иш) тему. Давайте начнем этот ответ с другого вопроса. Что такое Babel? Babel - транспиллер! Круто, а что такое транспиллер? Transpiler - это программа, которая преобразует один тип исходного кода в другой тип исходного кода. В нашем случае он берет весь причудливый javascript (реагирует, новые функции ECMAScript, машинописный текст и т. Д.) И преобразует его в старый, понятный браузеру javascript.
Узнай больше о Babel.

Обычно все это абстрагируется с помощью react-react-app, что является хорошей отправной точкой. Но мы не хотим этим пользоваться, мы любим сами все настраивать!

Настройка React

Установочная папка с npm и git

mkdir my-app
cd my-app
npm init

На этом этапе npm попросит вас ответить на несколько основных вопросов о вашем проекте, а затем создаст файл package.json в корневом каталоге.

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

git init .

Создайте файл HTML и Javascript (React)

Начните с создания новой исходной папки

mkdir src
cd src

Теперь давайте добавим файл HTML и javascript.

touch index.html
touch index.js

Напишем код

Сначала нам нужно установить react и react-dom

npm install react react-dom

Теперь мы добавляем код в только что созданные файлы.
Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>Hello World</h1>,
  document.getElementById('root')
);

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

Установить веб-пакет

Во-первых, нам нужно установить веб-пакет в наш проект.

npm install webpack webpack-cli webpack-dev-server --save-dev

Это устанавливает 3 пакета: основной webpack пакет, webpack-cli для выполнения команд webpack и webpack-dev-server для локального запуска реакции.

Добавить файл конфигурации

После того, как мы установили веб-пакет, пришло время его настроить. Мы можем сделать это, добавив файл конфигурации webpack в папку root.

touch webpack.config.js

Определите точку входа для веб-пакета

Во-первых, нам нужно указать веб-пакету, где начать объединение файлов javascript, мы можем сделать это, указав свойство entry. Узнать больше о поле entry.

const path = require('path');

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
}

Здесь мы используем path, это собственный модуль NodeJs, он помогает нам объединять пути к файлам.

Определите выходной путь для связанного файла

const path = require('path');

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path:path.resolve(__dirname, "dist"),
  }
}

Здесь мы говорим webpack создать последний связанный файл в папке dist в корне проекта. Узнать больше о поле output.

Добавьте связанный файл js в файл HTML

После создания связанного файла javascript нам нужно указать webpack внедрить его в качестве тега сценария в файл HTML. Для этого нам сначала нужно установить плагин webpack, который поможет нам в этом.

npm install html-webpack-plugin --save-dev

Теперь воспользуемся этим плагином.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path:path.resolve(__dirname, "dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "src", "index.html"),
    }),
  ],
}

Это возьмет /public/index.html и вставит в него тег скрипта. И переместите этот HTML-файл в папку dist. Узнайте больше об этом плагине.

Настроить Babel

Установить babel

npm install @babel/core babel-loader --save-dev

Здесь мы устанавливаем @babel/core, который является основным транспилером. Затем у нас есть babel-loader, который представляет собой загрузчик веб-пакетов, который поможет веб-пакету использовать транспилятор babel. Узнайте больше о @ babel / core и babel-loader.

Настройте webpack для использования babel

Теперь нам нужно указать webpack, что нужно преобразовывать файлы javascript с помощью babel перед их объединением. Для этого нам нужно определить rules для объединения модулей.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: path.join(__dirname, "src", "index.js"),
  output: {
    path:path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        }
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "src", "index.html"),
    }),
  ],
}

Здесь мы говорим webpack использовать babel-loader для преобразования файлов, которые заканчиваются на .js. Подробнее о поле rules.

Определение правил для Babel

Babel - это транспилятор, поэтому нам нужно сказать ему, что транспилировать, мы делаем это с помощью предустановок. Это предопределенная конфигурация, которая используется для преобразования другого типа в javascript в понятный браузерам.
Давайте сначала установим эти пресеты.

npm install @babel/preset-env @babel/preset-react --save-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.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "src", "index.html"),
    }),
  ],
}

Здесь у нас есть 2 пресета @babel/preset-env для транспиляции синтаксиса ES2015 + и у нас есть @babel/preset-react для транспиляции кода реакции. Узнайте больше об этих пресетах.

Сборка и запуск

Теперь, когда мы создали файл конфигурации, пришло время создать и запустить приложение. Для этого нам нужно добавить несколько скриптов в package.json.

"scripts": {
  "dev": "webpack serve",
  "build": "webpack",
  ...
}

dev будет использовать сервер разработки webpack и запускать приложение локально. build создаст пакет активов, который можно развернуть на серверах.

Запускать локально

npm run dev

Комплект сборки

npm run build

Дополнительные полезные конфигурации

Конфигурация Babel для файлов CSS

module.export = {
  ...
  "module": {
    "rules": [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      ....
    },
    ...
  },
  ...
}

Конфигурация Babel для изображений

module.export = {
  ...
  "module": {
    "rules": [
      {
        test: /\.(png|jp(e*)g|svg|gif)$/,
        use: ['file-loader'],
      },
      ....
    },
    ...
  },
  ...
}

Конфигурация Babel для SVG как реагирующего компонента

module.export = {
  ...
  "module": {
    "rules": [
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
      ....
    },
    ...
  },
  ...
}

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