React + Webpack 4 + Babel 7 Руководство по установке.|Простые советы.

вторник, 26 февраля 2019 г.

React + Webpack 4 + Babel 7 Руководство по установке.

Это руководство для тех, кто ищет свои способы настройки среды React, Webpack и Babel.

Это руководство относится к последним версиям React 16, Webpack 4 и Babel 7.

Facebook создал и поддерживает готовое приложение - creat-react-app, которое уже включает все необходимые настройки и отлично подходит для начинающих разработчиков.

Эта статья больше о том, как научить людей настраивать собственный проект без стороннего шаблонного проекта. В какой-то момент вы начнете использовать инструменты вокруг вашей библиотеки или фреймворка по вашему выбору. В JavaScript вам придется иметь дело с Webpack, Babel и многим другим, и поэтому имеет смысл узнать о них. Я надеюсь, что эта статья поможет вам в этом приключении.

Создание структуры.

Убедитесь, что у вас установлены Node.js и NPM.

node -v npm -v

Результат:

Если не установлены, то установите с официального сайта.

Я работаю под Windows -8 и в редакторе VS-Code.

Перейдите в нужную вам директорию и создайте основную папку для вашего проекта. У меня это будет папка react-min-setup

mkdir react-min-setup
cd react-min-setup

Выше, я создал папку из КС ( командной строки) и перешел в нее. Теперь у вас есть папка проекта. Далее вы можете инициализировать его как проект npm . Задав ему -y сокращенный флаг, вы сообщаете npm, что он должен принимать все значения по умолчанию. Если вы не оставите флажок, вы должны указать информацию о вашем проекте вручную.

npm init -y

Вы можете извлечь файл package.json после инициализации вашего проекта как проекта npm. Он должен быть заполнен вашими значениями по умолчанию. Если вы хотите изменить настройки по умолчанию, вы можете просмотреть и изменить их с помощью следующих команд в командной строке:

npm config list

npm set init.author.name ""
npm set init.author.email "you@example.com"
npm set init.author.url "example.com"
npm set init.license "MIT"

После настройки вашего проекта npm, вы можете установить пакеты узлов (библиотеки) в свой проект с помощью самого npm. После установки нового пакета узла, он должен появиться в вашем файле package.json .

Я это сделаю из терминала редактора.

В папке проекта я создам папку dist с файлом index.html. В этой папке будут храниться уже готовые для размещения на хостинге, или иного использования, файлы проекта.

index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>React + Webpack 4 + Babel 7 </title>
</head>
<body>
    <div id="app"></div>
    <script src="./bundle.js"></script>
</body>
</html>

В файле ничего особенного. Есть корневой див, в котором будет размещаться весь React - проект и подключен файл bundle.js из этой же папки dist, в который и будут собираться все файлы нашего проекта, с помощью webpack.

Два важных факта о содержании:

файл bundle.js будет сгенерирован Webpack
Атрибут id = "app" поможет нашему корневому компоненту React найти точку входа

Поэтому наши следующие возможные шаги:

настроить Webpack для объединения наших исходных файлов в один файл как bundle.js
построить наш первый корневой компонент React, который использует точку входа id = "app"

На этом этапе все файлы проекта доступны в гит-репо react-min-setup-abc ci -m "Initiall commit layout project"

Настройка Webpack

Вы будете использовать Webpack в качестве модуля сборки и инструмента построения приложения. Более того, вы будете использовать webpack-dev-server для обслуживания вашего приложения в локальной среде. В противном случае вы не сможете увидеть его в браузере для его разработки. И последнее, но не менее важное: вам понадобится пакет узла webpack-cli, чтобы позже настроить конфигурацию Webpack в файле конфигурации. Давайте установим все три пакета узлов, используя npm.

Из корневой папки:

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

Теперь у вас должна быть папка node_modules, где вы можете найти сторонние зависимости. Зависимости также будут перечислены в файле package.json , так как вы использовали флаг –save-dev . Ваша структура папок должна выглядеть следующим образом:

Структура папки:

- dist
- - index.html
- node_modules
- package.json

В файле package.json вы можете добавить стартовый скрипт (выделил красным) дополнительно к заданным по умолчанию скриптам для запуска webpack-dev-server.

package.json


 "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

В файле появились установленные зависимости:

Сценарий определяет, что вы хотите использовать webpack-dev-server с файлом конфигурации с именем webpack.config.js . --mode development это Флаг, который просто добавляет WebPack по умолчанию конфигурации , которые пришли с Webpack 4. Вам не нужен флаг для Webpack 3.

Давайте создадим необходимый файл webpack.config.js .


module.exports = {
    entry: './src/index.js',
    output: {
      path: __dirname + '/dist',
      publicPath: '/',
      filename: 'bundle.js'
    },
    devServer: {
      contentBase: './dist'
    }
  };

Грубо говоря, в конфигурационном файле сказано, что:

мы хотим использовать файл src / index.js в качестве точки входа для объединения всех импортированных файлов.
Связанные файлы приведут к файлу bundle.js, который
будет сгенерирован в нашей уже настроенной папке / dist . Эта папка будет использоваться для обслуживания нашего приложения.

В нашем проекте отсутствует папка и файл src / index.js . Создадим их. В файл index.js добавим, какой - нибудь вывод в консоль. Например:


   console.log('My Minimal React Webpack Babel Setup');

Структура проекта:

- dist
- - index.html
- node_modules
- src
- - index.js
- package.json
- webpack.config.js

Теперь вы сможете запустить свой webpack-dev-server.

npm start

По умолчанию, проект запустится на порту 8080. И если посмотрим в консоль, то увидим наше сообщение.

Сейчас, вы подаете свое приложение через Webpack прямо в браузер. Вы связываете файл точки входа src / index.js как bundle.js , используете его в dist / index.html и можете увидеть его console.log()в консоли разработчика.

Пока это только файл src / index.js . Но позже вы импортируете больше файлов JS в этот файл, который автоматически будет упакован Webpack в файл bundle.js, который и будет создан.

На этом этапе все файлы проекта доступны в гит-репо react-min-setup-abc
ci -m "Webpack installation and setup"

Настройка Babel

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

Из корневой папки:

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

Кроме того, чтобы подключить его к Webpack, вам необходимо установить так называемый загрузчик ("лодырь" - 😉 ):

npm install --save-dev babel-loader

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

Из корневой папки:

npm install --save-dev @babel/preset-react

Теперь, когда все пакеты узлов установлены, вам нужно настроить файлы package.json и webpack.config.js так, чтобы они соответствовали изменениям Babel.

Ниже все добавленное выделил красным.Эти изменения включают в себя все пакеты, которые вы установили.

package.json


{
  "name": "react-min-setup",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Yaroslav",
  "license": "ISC",
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.3.3",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "webpack": "^4.29.5",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.2.0"
  }
}

webpack.config.js


module.exports = {
    entry: './src/index.js',
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: ['babel-loader']
        }
      ]
    },
    resolve: {
      extensions: ['*', '.js', '.jsx']
    },
    output: {
      path: __dirname + '/dist',
      publicPath: '/',
      filename: 'bundle.js'
    },
    devServer: {
      contentBase: './dist'
    }
  };

Вы можете снова запустить приложение. Ничего не должно было измениться, за исключением того, что теперь вы можете использовать будущие функциональные возможности ECMAScript для JavaScript.

Я просто допишу в файл src/index.js, что-то такое, например:


   console.log('My Minimal React Webpack Babel Setup');

   const obj={name:'Yaroslav', age: 48, id:1};
   let {name} = obj;
   console.log(name);

Запускаем проект:

npm start

Идем на 8080 порт и в консоли видим:

Необязательный шаг - извлечь конфигурацию Babel в отдельный файл конфигурации .babelrc

Создаем файл .babelrc в корне проекта.

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

Это должно быть настроено только в одном месте!

.babelrc


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

Babel позволяет вам использовать будущий JavaScript в вашем браузере, потому что он превращает его в ванильный JavaScript. Теперь вы настроены на создание своего первого компонента React.

На этом этапе все файлы проекта доступны в гит-репо react-min-setup-abc
ci -m "Babel installation and setup"

Настраиваем React

Чтобы использовать React, вам нужно еще два пакета узлов. Пакеты установим через npm.

Из корневой папки:

npm install --save react react-dom

В вашем src / index.js вы можете реализовать свою первую запись в мире React.

src / index.js


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

const title = 'My Minimal React Webpack Babel Setup';

ReactDOM.render(
  <div>{title}</div>,
  document.getElementById('app')
);

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

ReactDOM.render нужны два параметра. Первый параметр - это ваш JSX. У него должен быть всегда один корневой узел.

Второй параметр - это узел, к которому должен быть добавлен ваш вывод. Помните , когда мы использовали <div id="app"></div> в / index.html файл? Этот же идентификатор - ваша точка входа в React.

На этом этапе все файлы проекта доступны в гит-репо react-min-setup-abc
ci -m "React installation and setup"

Hot Module Replacement

Очень полезный пакет, который позволит вам значительно упростит разработку и сократит время. Когда вы что-то меняете в исходном коде, эти изменения будут применяться в вашем приложении, запущенном в браузере, без перезагрузки всей страницы . Более подробно, на странице приложения - react-hot-loader

Из корневой папки:

npm install --save-dev react-hot-loader

Вы должны добавить еще несколько настроек в ваш файл конфигурации Webpack.

webpack.config.js


const webpack = require('webpack');
module.exports = {
    entry: './src/index.js',
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: ['babel-loader']
        }
      ]
    },
    resolve: {
      extensions: ['*', '.js', '.jsx']
    },
    output: {
      path: __dirname + '/dist',
      publicPath: '/',
      filename: 'bundle.js'
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
      contentBase: './dist',
      hot: true
    }
  };

Кроме того, в файле src / index.js вы должны указать , что горячая перезагрузка доступна и должна использоваться.

SRC / index.js


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

const title = 'My Minimal React-16 Webpack- 4  Babel Setup';

ReactDOM.render(
  {title},
  document.getElementById('app')
);

module.hot.accept();

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

Из корневой папки:

npm start

Когда вы меняете свой title в компоненте React в файле src / index.js , вы должны увидеть обновленный вывод в браузере без перезагрузки браузера. Если вы удалите module.hot.accept();строку в консоли, то браузер выполнил перезагрузку. То есть, если что-то изменилось в коде, изменения применились!

На этом этапе все файлы проекта доступны в гит-репо react-min-setup-abc ci -m "Installation and setup Hot Module Replacement"

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

Успехов и хорошего кодинга!

Телеграм канал - Full Stack JavaScript Developer

3 комментария:

Unknown25 мая 2020 г. в 07:33
Отличная статья, только не совсем понял как собирать проект для продакшена
ОтветитьУдалить
Ответы
Yaroslav27 мая 2020 г. в 21:41
Вам просто нужно добавить в файл package.json в раздел scripts - "build": "webpack" и в консоли запустить сборку проекта - npm build
ОтветитьУдалить
Ответы
ninaChekalina11 августа 2020 г. в 14:23
Спасибо за статью. я благодаря этой статье нормальную установку сделала
ОтветитьУдалить
Ответы

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

Хотите освоить самые современные методы написания React приложений? Надоели простые проекты? Нужны курсы, книги, руководства, индивидуальные занятия по React и не только? Хотите стать разработчиком полного цикла, освоить стек MERN, или вы только начинаете свой путь в программировании, и не знаете с чего начать, то пишите через форму связи, подписывайтесь на мой канал в Телеге, вступайте в группу на Facebook.Пишите мне - kolesnikovy70 почта gmail.com

Страницы

Translate

Поиск по этому блогу

вторник, 26 февраля 2019 г.