Это руководство для тех, кто ищет свои способы настройки среды React, Webpack и Babel.
Это руководство относится к последним версиям React 16, Webpack 4 и Babel 7.
Facebook создал и поддерживает готовое приложение - creat-react-app, которое уже включает все необходимые настройки и отлично подходит для начинающих разработчиков.
Эта статья больше о том, как научить людей настраивать собственный проект без стороннего шаблонного проекта. В какой-то момент вы начнете использовать инструменты вокруг вашей библиотеки или фреймворка по вашему выбору. В JavaScript вам придется иметь дело с Webpack, Babel и многим другим, и поэтому имеет смысл узнать о них. Я надеюсь, что эта статья поможет вам в этом приключении.
Результат:
Если не установлены, то установите с официального сайта.
Я работаю под Windows -8 и в редакторе VS-Code.
Перейдите в нужную вам директорию и создайте основную папку для вашего проекта. У меня это будет папка react-min-setup
Выше, я создал папку из КС ( командной строки) и перешел в нее. Теперь у вас есть папка проекта. Далее вы можете инициализировать его как проект npm . Задав ему
Вы можете извлечь файл package.json после инициализации вашего проекта как проекта npm. Он должен быть заполнен вашими значениями по умолчанию. Если вы хотите изменить настройки по умолчанию, вы можете просмотреть и изменить их с помощью следующих команд в командной строке:
После настройки вашего проекта npm, вы можете установить пакеты узлов (библиотеки) в свой проект с помощью самого npm. После установки нового пакета узла, он должен появиться в вашем файле package.json .
Я это сделаю из терминала редактора.
В папке проекта я создам папку dist с файлом index.html. В этой папке будут храниться уже готовые для размещения на хостинге, или иного использования, файлы проекта.
index.html
В файле ничего особенного. Есть корневой див, в котором будет размещаться весь React - проект и подключен файл bundle.js из этой же папки dist, в который и будут собираться все файлы нашего проекта, с помощью webpack.
Два важных факта о содержании:
файл bundle.js будет сгенерирован Webpack
Атрибут
Поэтому наши следующие возможные шаги:
На этом этапе все файлы проекта доступны в гит-репо react-min-setup-abc ci -m "Initiall commit layout project"
Из корневой папки:
Теперь у вас должна быть папка node_modules, где вы можете найти сторонние зависимости. Зависимости также будут перечислены в файле package.json , так как вы использовали флаг
Структура папки:
В файле package.json вы можете добавить стартовый скрипт (выделил красным) дополнительно к заданным по умолчанию скриптам для запуска webpack-dev-server.
package.json
В файле появились установленные зависимости:
Сценарий определяет, что вы хотите использовать webpack-dev-server с файлом конфигурации с именем webpack.config.js .
Давайте создадим необходимый файл webpack.config.js .
Грубо говоря, в конфигурационном файле сказано, что:
В нашем проекте отсутствует папка и файл src / index.js . Создадим их. В файл index.js добавим, какой - нибудь вывод в консоль. Например:
Структура проекта:
Теперь вы сможете запустить свой webpack-dev-server.
По умолчанию, проект запустится на порту 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"
Из корневой папки:
Кроме того, чтобы подключить его к Webpack, вам необходимо установить так называемый загрузчик ("лодырь" - 😉 ):
В качестве последнего шага, поскольку вы хотите использовать React, вам нужна еще одна конфигурация для преобразования синтаксиса JSX в React в обычный JavaScript.
Из корневой папки:
Теперь, когда все пакеты узлов установлены, вам нужно настроить файлы package.json и webpack.config.js так, чтобы они соответствовали изменениям Babel.
Ниже все добавленное выделил красным.Эти изменения включают в себя все пакеты, которые вы установили.
package.json
webpack.config.js
Вы можете снова запустить приложение. Ничего не должно было измениться, за исключением того, что теперь вы можете использовать будущие функциональные возможности ECMAScript для JavaScript.
Я просто допишу в файл src/index.js, что-то такое, например:
Запускаем проект:
Идем на 8080 порт и в консоли видим:
Создаем файл .babelrc в корне проекта.
Теперь вы можете добавить конфигурацию для Babel, которую вы ранее добавили в свой package.json (в коде файла выше это красным выделил) , в файл .babelrc . Не забудьте удалить конфигурацию из package.json позже.
Babel позволяет вам использовать будущий JavaScript в вашем браузере, потому что он превращает его в ванильный JavaScript. Теперь вы настроены на создание своего первого компонента React.
На этом этапе все файлы проекта доступны в гит-репо react-min-setup-abc
ci -m "Babel installation and setup"
Из корневой папки:
В вашем src / index.js вы можете реализовать свою первую запись в мире React.
src / index.js
Теперь вы должны видеть вывод в своем браузере, а не в консоли разработчика.
Второй параметр - это узел, к которому должен быть добавлен ваш вывод. Помните , когда мы использовали
На этом этапе все файлы проекта доступны в гит-репо react-min-setup-abc
ci -m "React installation and setup"
Из корневой папки:
Вы должны добавить еще несколько настроек в ваш файл конфигурации Webpack.
webpack.config.js
Кроме того, в файле src / index.js вы должны указать , что горячая перезагрузка доступна и должна использоваться.
SRC / index.js
Теперь вы можете запустить свое приложение снова.
Из корневой папки:
Когда вы меняете свой
На этом этапе все файлы проекта доступны в гит-репо react-min-setup-abc ci -m "Installation and setup Hot Module Replacement"
Таким образом, мы выполнили первоначальную настройку самого необходимого для реакт-разработки. Мы создали минимальный установочный пакет, который уже можно дополнять необходимыми модулями и библиотеками, в зависимости от поставленных задач.
Успехов и хорошего кодинга!
Это руководство относится к последним версиям 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
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 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
- - 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
- - 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
