Руководство по настройке реагировать с нуля, без использования create-react-app
и путем ручной настройки webpack и babel.
Содержание
- Настройка React
- Папка для установки с npm и git
- Создать файл HTML и Javascript (React)
- Давайте напишем код - Установить веб-пакет
- Установить веб-пакет
- Добавить файл конфигурации
- Определить точку входа для веб-пакета
- Определить выходной путь для связанного файла < br /> - Добавить связанный файл js в файл HTML - Настроить Babel
- Установить babel
- Настроить webpack для использования babel
- Определение правил (предустановок) для babel - Строить и запускать
- Дополнительные полезные конфигурации
- Конфигурация Babel для файлов CSS
- Конфигурация Babel для изображений
- Конфигурация Babel для SVG как компонент реакции
Зачем нам нужен веб-пакет?
Если вы написали код реакции, вы бы знали, что он требует написания большого количества файлов 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 - очень зрелые инструменты и имеют множество вариантов настройки, так что продолжайте учиться!