React Js предоставляет встроенную настройку среды CLI, [create-react-app](https://github.com/facebook/create-react-app). А настроить приложение create-react-app очень просто, и с него легко начать.
В. Итак, зачем нам знать о настройке среды react js с WebPack и babel?
A. Поскольку в основном большинство вещей настраивается с помощью babel и WebPack, единственная часть заключается в том, сколько вы можете пройти. глубже и познакомиться с основами настройки среды cli. Знание основ работы, которую вы выполняете, поможет вам смешивать вещи в соответствии с вашими предпочтениями. Итак, давайте начнем.
Создайте папку с именем react_setup и откройте эту папку в своем терминале.
Мы настроим webpack и webpack-cli как зависимости разработчика:-
npm установить веб-пакет webpack-cli -D
Он перенесет все модули узла, связанные с webpack и webpack-cli, в папку node-module.
Теперь мы перенесем наши зависимости разработчика Babel в node-modules:
npm установить babel-core babel-loader babel-preset-env babel-preset-реагировать -D
есть еще несколько зависимостей babel и webpack, которые мы добавим позже в этом процессе установки.
Теперь пришло время добавить в наш проект react и react-dom в качестве зависимостей. Итак, вернитесь к терминалу и напишите команду: -
npm install react react-dom — сохранить
— save настроит реакцию как зависимости в нашем package.json
Итак, давайте посмотрим на наш текущий package.json
{
«имя»: «react_setup»,
«версия»: «1.0.0»,
«описание»: «»,
«основная»: «index.js »,
«скрипты»: {
«тест»: «эхо \»Ошибка: тест не указан\» && выход 1
},
«ключевые слова»: [],
«автор»: «»,
«лицензия»: «ISC»,
«devDependencies»: {
«babel-core»: «⁶.26.3»,
«babel-loader»: «⁷.1.4»,
«babel-preset-env»: «¹.7.0»,
«babel-preset-react»: «⁶.24.1»,
«webpack»: «⁴.12.1»,
«webpack-cli»: «³.0.8»
},
«зависимости»: {
«реагировать ”: “¹⁶.4.1”,
“react-dom”: “¹⁶.4.1”
}
}
Итак, теперь у нас есть все devDependencies и зависимости в нашем package.json, и все зависимости загружены в модуль node. Если вы не хотите делать настройку сверху, вы можете скопировать этот package.json в папку вашего проекта и запустить команду npm install, чтобы установить основы проекта.
Теперь перейдите к настройке веб-пакета для нашего проекта.
поэтому создайте файл webpack.config.js в своем любимом текстовом редакторе или в терминале с помощью команды touch webpack.config.js (для Mac)
Откройте веб-пакет. config.js в текстовом редакторе и запустите настройку конфигурации:-
```
var webpack = require('webpack');
var path = require('path');< br /> module.exports = {
запись: path.resolve(__dirname, 'src') + '/index.js',
вывод: {
path: path.resolve(__dirname , 'public'),
имя файла: 'bundle.js',
publicPath: '/public/'
},
модуль: {
правила: [< br /> {
тест: /\.js$/,
исключить: /node_modules/,
использовать: {
загрузчик: «babel-loader»
}
}
]
},
watch: true
};
```
Согласно этой конфигурации веб-пакета, путь входа в наш проект является index.js, который находится в папке с именем «src», и наш выходной путь будет папкой с именем «public», а имя нашего выходного файла — bundle.js. и мы также определяем publicPath как общую папку.
Теперь, чтобы настроить правила создания нашего пакета, мы определим модуль и правила как массив объектов, которые будут использовать babel-loader для преобразования нашего es6 (ECMA Script 2015 или более поздняя версия ) на es5, поскольку большинство браузеров до сих пор понимают только es5, и мы также хотим, чтобы наш проект был обратно совместим и со старыми браузерами.
теперь пришло время настроить пресеты babel:-
Итак, создайте файл с именем .babelrc и вставьте код:-
```
{
«presets»: [«env», «react»]
}
```
Теперь мы закончили настройку среды. , пора приступить к нашей главной цели — написанию React :-
Итак, создайте папку с именем «src» (mkdir src)
и создайте файл index.js (важно — потому что мы сказали веб-пакету начать наш пакет только из index.js). Итак, наш index.js будет выглядеть так.
импортировать React из «React»;
импортировать ReactDOM из «React-dom»;
ReactDOM.render(‹div›React starts‹/div›, document.getElementById(‘react-root’));
теперь мы будем удивляться с index.html, как мы получили этот document.getElementById элемента react-root. Ты прав. Нам нужен index.html, который будет лежать в общей папке.
Создайте папку с именем «public» и создайте файл index.html в общей папке.
index.html будет выглядеть так:-
```
‹!DOCTYPE html›
‹html›
‹head›
‹meta charset="utf-8 /›
‹meta http-equiv="X-UA-Compatible" content="IE=edge"›
‹title›Страница Заголовок‹/название›
‹meta name="viewport" content="width=device-width, initial-scale=1›
‹/head›
‹body›
‹div id="react-root"›‹/div›
‹script src="bundle.js"›‹/script›
‹/body›
‹/html›
```
пришло время проверить, все ли работает правильно :-
Итак, нам нужно запустить webpack, но у нас нет команды для настройки и сборки или запуска package.json, поэтому перейдите в package.json и найдите скрипты и вставьте ниже в скрипты;-
```
«build»: «webpack -p»
```
это будет создайте готовый к работе файл webpack bundle.js
, поэтому введите команду
```
npm run build
```
Теперь проверьте свою общую папку, вы найдете bundle.js, созданный webpack.
теперь вы можете запустить свой index.html, дважды щелкнув файл в папке react_setup/public:-
Итак, наша настройка завершена, наслаждайтесь разработкой. Если вам нравится этот урок, дайте свои комментарии и лайки и не стесняйтесь задавать свои сомнения.
