Автор оригинала: FreeCodeCamp Community Member.

Назаре Эмануэль Иоан

За прошлый год и некоторые я работал с реагированием на Творческий Тим Отказ Я использовал Create-React-App Для разработки каких-то хороших продуктов. Там было много клиентов, спрашивающих, как кто-то может перенести наши шаблоны продукта на WebPack.

Поэтому после ряда запросов мы создали этот маленький учебник о том, как начать использовать Реагировать с WebPack 4 и Бабел 7 Отказ В конце учебника я собираюсь показать вам, ребята, как добавить Материальная приборная панель реагирует На вершине недавно созданного приложения.

Прежде чем мы начнем, пожалуйста, убедитесь, что у вас есть последние версии NPM и Nodejs Установлен во всем мире на вашу машину. На момент написания этого поста новейшие версии были 6.4.1 для NPM и 8.12.0 (LTS) для Nodejs на моей машине.

Создание новой папки проекта с Public.json

Первые вещи сначала, давайте создадим Новая папка Для нашего нового приложение и введите это:

mkdir react-webpack-babel-tutorialcd react-webpack-babel-tutorial

Теперь, когда мы создали Папка в котором мы собираемся развивать приложение , нам нужно добавить Package.json файл к нему. Мы можем сделать это двумя способами, и вы должны выбрать один из них:

1. просто создайте Package.json Файл без какой-либо другой конфигурации:

npm init -y

Как вы можете видеть, Package.json Файл был создан с какой-то очень базовой информацией в нем.

2. Создайте Package.json Файл с некоторыми дополнительными настройками конфигурации

npm init

Я добавил некоторые вещи к нашим вновь созданным Package.json Файл, такой как хороший ключевые слова , репо и так далее…

После этого давайте добавим index.html и index.js Файлы нашей новой папке проекта, внутри SRC папка.

1. Команды Linux/MacOS

mkdir srctouch src/index.htmltouch src/index.js

2. Команды Windows

mkdir srcecho "" > src\index.htmlecho "" > src\index.js

После этого давайте добавим следующий шаблон внутри index.html.

Давайте добавим что-то внутри index.js Только ради какой-то витрины мы собираемся увидеть немного дальше вниз.

(function () {  console.log("hey mister");}());

И это то, что у нас так далеко:

Добавление веб-папака к проекту

Давайте начнем добавлять все WebPack Пакеты, которые нам понадобится. Мы собираемся установить их как DevDependonds Поскольку они будут использоваться только в режиме развития.

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

• WebPack – используется для настройки нашего нового приложения – во время этого поста версия была 4.19.0
• WebPack-Cli – Используется, чтобы мы могли использовать WebPack в командной строке – во время этого поста версия была 3.1.0
• WebPack-Dev-Server – Используется так, что когда мы внесем изменение в файл внутри нашего нового приложения, нам не нужно обновлять страницу. Он автоматически обновляет страницу браузера каждый раз, когда мы меняем файл в нашем приложении – Как говорит его имя, это сервер, который работает без остановки – во время этого поста версия была 3.1.8.

Если мы посмотрим внутрь Package.json Файл, мы увидим, что эти три пакета были добавлены в этот файл, например:

"devDependencies": {  "webpack": "^4.19.0",  "webpack-cli": "^3.1.0",  "webpack-dev-server": "^3.1.8"}

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

Как вы увидите, установка этих плагинов внесла некоторые изменения в нашу папку проекта. Это добавлено node_modules папка и Package-lock.json к этому.

Теперь нам нужно добавить новый файл в наш проект, файл конфигурации для WebPack называется webpack.config.js :

1. Команда linux/macos

touch webpack.config.js

2. Команда Windows

echo "" > webpack.config.js

Или вы можете просто вручную создать новый файл, если вы не хотите использовать командную строку.

Прежде чем мы идти вперед и начнем возиться с WebPack Config Файл, давайте сначала установим некоторые вещи, которые нам понадобится в нашем приложении.

Во-первых, мы собираемся работать с некоторыми путями внутри файла конфигурации WebPack. Давайте установим путь В нашем проекте как DevDependency.

npm install --save-dev path

Также, так как мы не хотим вручную вводить index.js Файл внутри HTML One, нам понадобится плагин, называемый html-webpack-plugin. Этот плагин вплются index.js Внутри файла HTML без ручной работы.

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

Еще раз, я собираюсь редактировать мои Package.json Файл и удалить все ^ (Caret) вхождения от него.

Еще один редактировать, что мы собираемся сделать нашему Package.json это добавить новые сценарии внутри скрипты объект после Тест скрипт (см. Второй пример ниже).

"webpack": "webpack","start": "webpack-dev-server --open"

Это то, что ваш Package.json должен выглядеть в этот момент:

{  "name": "react-webpack-babel-tutorial",  "version": "1.0.0",  "description": "This is a Tutorial to showcase the usage of React with Webpack and Babel",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "webpack": "webpack",    "start": "webpack-dev-server --open"  },  "repository": {    "type": "git",    "url": "git+https://github.com/creativetimofficial/react-webpack-babel-tutorial.git"  },  "keywords": [    "react",    "webpack",    "babel",    "creative-tim",    "material-design"  ],  "author": "Creative Tim  (https://www.creative-tim.com/)",  "license": "MIT",  "bugs": {    "url": "https://github.com/creativetimofficial/react-webpack-babel-tutorial/issues"  },  "homepage": "https://github.com/creativetimofficial/react-webpack-babel-tutorial#readme",  "devDependencies": {    "html-webpack-plugin": "3.2.0",    "path": "0.12.7",    "webpack": "4.19.0",    "webpack-cli": "3.1.0",    "webpack-dev-server": "3.1.8"  }}

Давайте пойдем вперед и запустим эти команды один за другим и посмотрите, что происходит.

npm run webpack

WebPack автоматически займет SRC/index.js Файл, компилируйте его и выведите его внутри dist/main.js и будет домирять этот код. Это потому, что мы еще не настроили WebPack Config файл. Также, поскольку мы не настроили файл, мы будем иметь некоторые предупреждения в нашей консоли.

Если мы запустим другую команду

npm start

WebPack-Dev-Server Будет автоматически запустить сервер и откройте браузер по умолчанию с помощью этого сервера. Но еще раз, так как у нас нет наших webpack.config.js Файл настроен, выход не будет ожидаемой.

Если вы хотите остановить сервер, просто нажмите одновременно Ctrl + C . Клавиши во время командной строки.

Давайте добавим следующий шаблон внутри нашего WebPack Config файл:

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: 'index.bundle.js'  },  mode: process.env.NODE_ENV || 'development',  resolve: {    modules: [path.resolve(__dirname, 'src'), 'node_modules']  },  devServer: {    contentBase: path.join(__dirname,'src')  },  plugins: [    new HtmlWebpackPlugin({      template: path.join(__dirname,'src','index.html')    })  ]};

• Вход и Выход – Они используются для того, чтобы рассказать наш сервер, что должно быть скомпилировано и откуда ( запись: path.join (__ dirname, ‘src’, kind.js ‘), ). Он также рассказывает, где поставить выпущенную компилируемую версию ( Выход – Папка и имя файла)
• Режим – Это режим нашего выхода. Мы устанавливаем это на « Развитие ‘. Если в скриптах мы указываем Node_env Переменная, вместо этого займет этот. См. Пример ниже, как использовать Node_env. (Обратите внимание, что приведенные ниже изменения не будут выполнены внутри Package.json Файл в этом руководстве, это просто пример для вас, чтобы увидеть, как он работает)

"webpack": "NODE_ENV=production webpack",

• решить – это используется, чтобы мы могли импортировать что-либо из SRC папка в относительных путях вместо абсолютных. Это то же самое для node_modules. Мы можем импортировать что-либо из Node_Modules напрямую без абсолютных путей
• Devserver – Это говорит WebPack-Dev-Server Какие файлы необходимы для обслуживания. Все от нашего SRC Папка должна быть подана (выводится) в браузере
• плагины – Здесь мы устанавливаем, какие плагины нам нужны в нашем приложении. На этот момент нам нужны только html-webpack-plugin который говорит серверу, что index.bundle.js следует вводить (или добавить, если вы будете) к нашему index.html файл

Если мы сейчас запустим более ранние команды, мы увидим некоторые различия.

npm run webpack

Мы изменились, где должен быть вывод (от dist папка на Build папка). Изменяя Режим WebPack Теперь код имеет другой вид. Это не Министерство Как в последний раз без config . Отказ

npm start

WebPack-Dev-Server взял все от SRC Папка и выводила ее в наш браузер.

Мы находимся на правом пути, но мы добавили только WebPack в наш проект. Где реагируют и бабел? Ну, это то, что мы собираемся делать дальше.

Реагировать, бабел и несколько хороших погрузчиков для стилей

Добавить Реагировать и Реагировать в наш проект как Нормальные зависимости Отказ

npm install --save react react-dom

В этот момент в нашем развитии, если бы мы были добавить Реагировать код внутри нашего файла JS, WebPack даст нам ошибку. Это не умеет компилировать Реагировать внутри bundle.js файл.

Давайте изменим index.js Файл следующим образом:

import React from "react";import ReactDOM from "react-dom";let HelloWorld = () => {  return 
Hello there World!
}ReactDOM.render(  ,  document.getElementById("root"));

И после этого давайте снова запустите сервер.

npm start

И это ошибка:

Так что это где Бабел приходит на нашу помощь. Бабел скажу WebPack Как скомпилировать наши Реагировать код.

Давайте пойдем вперед и добавим кучу Babel Packages в наше приложение как DevDependonds Отказ

npm install --save-dev @babel/core @babel/node @babel/preset-env @babel/preset-react babel-loader

• @ Babel/Core – Это используется для компиляции ES6 И выше в Es5.
• @ Babel/Node – это используется, чтобы мы могли Импортировать Наши плагины и пакеты внутри webpack.config.js а не требуется их (Это просто то, что мне нравится, и, возможно, вам тоже понравится)
• @ babel/preset-env – Это будет определено, какие преобразования или плагины для использования и полифилл (I.e предоставляют современные функциональные возможности на более старых браузерах, которые не поддерживают его) на основе матрицы браузера, который вы хотите поддержать
• @ Babel/Preset-React – Это собирается компилировать Реагировать код в ES5 код
• Babel-Loader – Это WebPack помощник, который преобразует ваш JavaScript зависимости с Бабел (то есть трансформация Импорт заявления в Требовать

Поскольку вам, вероятно, вам нужно будет добавить некоторые стили в свой проект (я знаю, что им нужно), мы собираемся добавить загрузчик, который даст нам Импорт и использовать CSS Файлы и SCSS. файлы.

npm install --save-dev style-loader css-loader sass-loader node-sass

• Стиль-погрузчик – Это добавит к Дом Стили (впрыскиваем a <стиль> тег внутри E-й E HTML-файл) CSS-Loader
• – Давайте будем импортировать CSS Файлы в наш проект Sass-Loader
• – Давайте будем импортировать SCSS Файлы в наш проект Узел-сасс
• – Скомпирован SCSS Файлы в нормальный CSS файлы

Мы собираемся создать новый SCSS Файл и добавьте его в наши папки.

1. Команда linux/macos

touch src/index.scss

2. Команда Windows

echo "" > src/index.scss

А также добавьте несколько приятных стилей к нему.

body {  div#root{    background-color: #222;    color: #8EE4AF;  }}

И изменить наш index.js Добавляя импорт для SCSS файл.

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

// this line is new// we now have some nice styles on our react appimport "index.scss";

let HelloWorld = () => {  return 
Hello there World!
}

ReactDOM.render(  ,  document.getElementById("root"));

Не забудьте удалить клетки (^) от Package.json Отказ

Вот как ваш Package.json должен выглядеть как:

{  "name": "react-webpack-babel-tutorial",  "version": "1.0.0",  "description": "This is a Tutorial to showcase the usage of React with Webpack and Babel",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "webpack": "webpack",    "start": "webpack-dev-server --open"  },  "repository": {    "type": "git",    "url": "git+https://github.com/creativetimofficial/react-webpack-babel-tutorial.git"  },  "keywords": [    "react",    "webpack",    "babel",    "creative-tim",    "material-design"  ],  "author": "Creative Tim  (https://www.creative-tim.com/)",  "license": "MIT",  "bugs": {    "url": "https://github.com/creativetimofficial/react-webpack-babel-tutorial/issues"  },  "homepage": "https://github.com/creativetimofficial/react-webpack-babel-tutorial#readme",  "devDependencies": {    "@babel/core": "7.0.1",    "@babel/node": "7.0.0",    "@babel/preset-env": "7.0.0",    "@babel/preset-react": "7.0.0",    "babel-loader": "8.0.2",    "css-loader": "1.0.0",    "html-webpack-plugin": "3.2.0",    "node-sass": "4.9.3",    "path": "0.12.7",    "sass-loader": "7.1.0",    "style-loader": "0.23.0",    "webpack": "4.19.0",    "webpack-cli": "3.1.0",    "webpack-dev-server": "3.1.8"  },  "dependencies": {    "react": "16.5.1",    "react-dom": "16.5.1"  }}

Если мы снова запустим какие-либо из вышеуказанных команд, ошибка все равно будет сохраняться. Мы еще не сказали WebPack что это должно использовать Бабел и стиль погрузчики для компиляции нашего Реагировать и SCSS код.

Следующее, что нужно сделать, это добавить файл конфигурации для Бабел Отказ Для этого нам нужно создать файл с именем .babelrc. в котором мы настроим Бабел Отказ

Я слышал, что вы можете добавить конфигурацию для Варить прямо в webpack.config.js файл. Для этого вы можете взглянуть на Официальный документ Babel-Loader Отказ Насколько я понимаю, я думаю, что лучше иметь Бабел config в собственном файле. Таким образом, вы не переполняете ваш WebPack конфигурация

Итак, давайте запустим в командной строке следующее:

1. Команда linux/macos

touch .babelrc

2. Команда Windows

echo "" > .babelrc

И добавьте следующий код внутри .babelrc. так что Babel-Loader будет знать, что использовать для компиляции кода:

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

После этих шагов нам нужно будет добавить что-то в наш проект, чтобы мы могли импортировать все виды таких файлов, как изображения. Нам также нужно будет добавить плагин, который позволит нам работать с классами и гораздо больше. Добавьте свойства класса в наших классах. По сути, это позволит нам работать с Объектно-ориентированное программирование – отлично.

npm install --save-dev file-loader @babel/plugin-proposal-class-properties

Теперь, когда мы сделали это, нам нужно внести некоторые изменения внутри webpack.config.js так что WebPack теперь будет использовать Бабел Отказ Мы также настроим WebPack слушать Стиль файлы И мы собираемся изменить требуется заявления на Импорт теми.

Так что это сказано, давайте изменим наше webpack.config.js к следующему (я также добавил некоторые комментарии, может быть, они вам помогут):

// old// const path = require('path');// const HtmlWebpackPlugin = require('html-webpack-plugin');// newimport path from 'path';import HtmlWebpackPlugin from 'html-webpack-plugin';module.exports = {  entry: path.join(__dirname,'src','index.js'),  output: {    path: path.join(__dirname,'build'),    filename: 'index.bundle.js'  },  mode: process.env.NODE_ENV || 'development',  resolve: {    modules: [path.resolve(__dirname, 'src'), 'node_modules']  },  devServer: {    contentBase: path.join(__dirname,'src')  },  module: {    rules: [      {        // this is so that we can compile any React,        // ES6 and above into normal ES5 syntax        test: /\.(js|jsx)$/,        // we do not want anything from node_modules to be compiled        exclude: /node_modules/,        use: ['babel-loader']      },      {        test: /\.(css|scss)$/,        use: [          "style-loader", // creates style nodes from JS strings          "css-loader", // translates CSS into CommonJS          "sass-loader" // compiles Sass to CSS, using Node Sass by default        ]      },      {        test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,        loaders: ['file-loader']      }    ]  },  plugins: [    new HtmlWebpackPlugin({      template: path.join(__dirname,'src','index.html')    })  ]};

Есть еще одно изменение, которое нам нужно сделать с Package.json файл. Нам нужно сообщить нашим сценариям, что внутри файлов конфигурации WebPack мы используем Импортировать вместо требуется заявления. Еще оно даст нам ошибку, что она не знает, что Импорт обозначает.

{  "name": "react-webpack-babel-tutorial",  "version": "1.0.0",  "description": "This is a Tutorial to showcase the usage of React with Webpack and Babel",  "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1",    "webpack": "babel-node ./node_modules/webpack/bin/webpack",    "start": "babel-node ./node_modules/webpack-dev-server/bin/webpack-dev-server --open"  },  "repository": {    "type": "git",    "url": "git+https://github.com/creativetimofficial/react-webpack-babel-tutorial.git"  },  "keywords": [    "react",    "webpack",    "babel",    "creative-tim",    "material-design"  ],  "author": "Creative Tim  (https://www.creative-tim.com/)",  "license": "MIT",  "bugs": {    "url": "https://github.com/creativetimofficial/react-webpack-babel-tutorial/issues"  },  "homepage": "https://github.com/creativetimofficial/react-webpack-babel-tutorial#readme",  "devDependencies": {    "@babel/core": "7.0.1",    "@babel/node": "7.0.0",    "@babel/plugin-proposal-class-properties": "7.0.0",    "@babel/preset-env": "7.0.0",    "@babel/preset-react": "7.0.0",    "babel-loader": "8.0.2",    "css-loader": "1.0.0",    "file-loader": "2.0.0",    "html-webpack-plugin": "3.2.0",    "node-sass": "4.9.3",    "path": "0.12.7",    "sass-loader": "7.1.0",    "style-loader": "0.23.0",    "webpack": "4.19.0",    "webpack-cli": "3.1.0",    "webpack-dev-server": "3.1.8"  },  "dependencies": {    "react": "16.5.1",    "react-dom": "16.5.1"  }}

Еще одна вещь, которую нам придется еще добавить, это @ Babel/Plugin-предложение-класс – свойства к .babelrc файл. Babel узнает, как иметь дело с классовыми свойствами.

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

Теперь мы сделаем. Мы можем запустить либо одну из вышеуказанных команд, и это не должно давать нам никаких ошибок. Давайте посмотрим на них в действии.

npm run webpack

И теперь давайте посмотрим главный скрипт нашего приложения.

npm start

Добавьте дизайн материала для нашего нового реагирования с помощью WebPack и Babel Project

Как я уже говорил вам в начале этого поста, мы не собираемся создавать из стилей царапин для дизайна материала. Это потребует много работы. У нас нет времени для этого.

Вместо этого мы собираемся добавить хороший продукт, который реализует Дизайн материала Google С некоторыми незначительными прикосновениями от Творческий Тим Персонал Отказ Мы собираемся добавить Материальная приборная панель реагирует к этому.

Первые вещи сначала вам нужно получить продукт. Вот несколько способов получения продукта:

• Клонировать репо в другой папке:

git clone https://github.com/creativetimofficial/material-dashboard-react.git

• Скачать с github.
• Скачать из Creative Tim

Хорошо, так что теперь у нас есть как проекты – реагирование на приборную панель материала и наш вновь созданный с WebPack и Вавил – с Реагировать Отказ

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

Итак, я предлагаю начать с добавления зависимостей от Материальная приборная панель реагирует ‘s Package.json нашему Package.json. . Нам не нужны все зависимости от Материальная приборная панель React’s Пакеты, так как мы создали наш собственный сервер, используя WebPack. Мы добавили другие стиль погрузчики за рамки того, что имеет продукт.

Так что это говорит, нам нужно следующее:

npm install --save @material-ui/core@3.1.0 @material-ui/icons@3.0.1 @types/googlemaps@3.30.11 @types/markerclustererplus@2.1.33 chartist@0.10.1 classnames@2.2.6 perfect-scrollbar@1.4.0 react-chartist@0.13.1 react-google-maps@9.4.5 react-router-dom@4.3.1 react-swipeable-views@0.12.15

Мы не пройдете всеми из них. Их можно найти на npmjs.com со всеми деталями и собственной документацией.

Еще раз, мы идем в Package.json Файл и удалите клетки (^) из пакетов, которые мы только что установили.

Хорошо, мы почти закончили. Мы собираемся скопировать все содержимое SRC папка от Материальная приборная панель реагирует Внутри нашего проекта SRC папка и переопределить index.js файл. Но держите его в index.html файл.

Теперь нам нужно добавить некоторые стили и шрифты CDNS внутри нашего index.html Отказ

И мы почти там. У нас все еще есть небольшая проблема. Когда мы обновляем страницу, у нас есть ошибка Не может получить/панель инструментов . Если мы ориентируемся на другую страницу, мы получим, например, Не может получить/пользователь и так далее. Так что в основном, наши маршруты не работают. Нам нужно внести некоторые изменения внутри SRC/index.js или внутри нашего webpack.config.js Отказ

Я выберу первый вариант, поскольку это довольно просто и легко понять.

Мы ориентируемся внутри нового index.js, и мы изменяем тип истории. Мы поставили createhaShhistory () вместо CreateBrowserHistory. () .

Это позволит нам обновить страницу без каких-либо других ошибок. Теперь мы сделаем.

import React from "react";import ReactDOM from "react-dom";import { createHashHistory } from "history";import { Router, Route, Switch } from "react-router-dom";import "assets/css/material-dashboard-react.css?v=1.5.0";import indexRoutes from "routes/index.jsx";const hist = createHashHistory();ReactDOM.render(            {indexRoutes.map((prop, key) => {        return ;      })}      ,  document.getElementById("root"));

Я действительно надеюсь, что вам понравилось это руководство, и я очень заинтересован, услышав свои мысли об этом. Просто дайте эту тему комментарий, и я буду более чем рад ответить.

Особое спасибо, должно также пойти в Линь Нгуен Мой для нее Учебное пособие Что дало мне некоторое значительное понимание на WebPack Отказ

Полезные ссылки:

• Получите код для этого руководства от Гадость
• Узнайте больше о RECTJS на их официальный сайт
• Узнайте больше о WebPack здесь
• Узнайте больше о Babel на Эта ссылка здесь
• Узнайте больше о Материал дизайн
• Проверьте нашу платформу, чтобы увидеть Что мы делаем и кто мы есть
• Получить материальную приборную панель реагировать от www.creative-tim.com или из Гадость
• Узнайте больше о Материал-ui ядро материальной приборной панели реагирует

Найди меня на:

• Электронная почта: manue@creative-tim.com.
• Facebook: https://www.facebook.com/nazareEmanuel
• Instagram: https://www.instagram.com/manu.nazare/

Оригинал: “https://www.freecodecamp.org/news/how-to-use-reactjs-with-webpack-4-babel-7-and-material-design-ff754586f618/”