React — это интерфейсная среда (среда MVC: основное внимание уделяется операциям слоя представления), разработанная Facebook и в настоящее время широко используемая в отрасли. Чтобы сделать раму более легкой, дизайнеры определяют ее как «прогрессивную», то есть:
- Основные части основной части находятся в двух фреймворках react/react-dom.
- Если мы хотим использовать маршрутизацию, нам нужно установить react-router
- Если вы хотите использовать redux для единого управления состоянием, мы установим redux/react-redux.
- Если мы хотим реализовать другие функции, мы можем продолжать устанавливать промежуточное ПО/axious и т. д. ...
- В соответствии с потребностями пользователя установите различные вспомогательные компоненты для завершения, это «прогрессивная» идея дизайна (vue также разработан таким образом)
У такого рода операций есть свои преимущества и недостатки. Проблема в том, что нам нужно постоянно устанавливать различные компоненты во время разработки, а уникальный синтаксис jsx реакции не может быть напрямую разобран браузерами. Мы используем es6 в процессе написания программ. /less wait требует обработки компиляции...
В настоящее время мы с нетерпением ждем средства автоматического развертывания, которое поможет нам автоматизировать эти операции компиляции. Webpack — это очень часто используемая платформа автоматического развертывания в текущих проектах. Перед созданием проекта нам также необходимо настроить веб-пакет самостоятельно. ... Подобных операций много, поэтому сложная и громоздкая настройка проекта, установка модулей и т. д. стали большой головной болью для разработчиков. Для решения этих проблем на рынке существует множество скаффолдов, разработанных реактивными проектами:
- generator-z-react-cli
- create-react-app
- ... С помощью этих каркасов мы можем быстро построить полную структуру реактивного проекта, избегая ручной ручной настройки.
create-react-app
FaceBook официально выпустил инструмент для быстрого создания среды разработки без настройки: https://github.com/facebook/create-react-app
1. Сначала установите приложение create-react-app глобально на основе npm.
npm install -g create-react-app
2. Создайте проект проекта реакции в указанном каталоге.
create-react-app my-app
my-app — имя проекта, заданное вами (следуя требованиям при выпуске модуля npm, например, в имени Boone появляются заглавные буквы или китайские иероглифы и спецсимволы и т. д.)
3. Перейдите в указанный файл проекта и запустите проект
cd my-app
npm run start или $ yarn start (при условии, что пряжа установлена глобально)
生产的结构目录
my-app
|--build //构建目录，遵循发布系统规范
| |-- index.html //静态页面
| |-- static //资源文件
|
|-- node_modules //项目组件文件夹：所有安装的组件都在这
|
|--src //源码目录
| |--index.js //入口文件(还生成了其它的文件，但是没啥用，我们可以直接的删除掉)
|
|--public //静态页面目录
| |--index.html //主页面(还生成了其它的文件，但是没啥用，我们可以直接的删除掉)
|
|-- .gitignore //git提交的忽略文件，我们一般还需要再手动增加.idea(通过webstorm编辑工具进行开发，生成的文件)
|--package.json //项目依赖项及项目基础信息
|--README.md //项目描述
|-- ...
生成的package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": { //=>生产依赖项
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.0"
},
"scripts": { //=>可执行脚本
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
/*
* 可执行脚本注释:
* $ npm run start 启动服务，自动编译项目，可以实现边开发，边自动编译刷新，看到最新开发的效果
*
* $ npm run build 把项目整体进行编译，最后再bulid目录中生成项目编译后的文件，我们上传服务器的就是这些文件
*
* $ npm run test 使用Jest作为测试运行程序（不常用）
*
* $ npm run eject 下文具体介绍使用
*
* 当然以上操作也可以基于yarn来完成
*/
В результате анализа мы обнаружили, что приложение create-react-app имеет следующие характеристики:
- Только что установил наиболее часто используемые компоненты react/react-dom в react, остальные не устанавливаются, так что при разработке проекта мы можем также установить по мере необходимости: $ yarn add redux react-redux react-router-dom prop -types etc .
- После того, как проект создан, леса скрывают все файлы конфигурации, связанные с веб-пакетом, для «элегантности».В это время, если вы посмотрите на каталог папки myapp, вы обнаружите, что файлы конфигурации веб-пакета не могут быть найдены; это также приводит к, если нам нужно быть в webpack Становится сложно установить какие-то собственные загрузчики или плагины;
- Веб-пакет, автоматически сгенерированный приложением create-react-app, объединяет: eslint (обнаружение кода, загрузчик URL (изображение BASE64 [изображение менее 10000 КБ]), загрузчик babel (анализ ES6 и JSX), загрузчик стилей, загрузчик css (CSS разбор кода), HtmlWebpackPlugin (плагин вывода HTML) и т. д.
- ...
npm run ejectКак упоминалось выше, леса для «элегантности» скрывают все файлы конфигурации веб-пакета, если мы хотим снова добавить некоторые свои вещи на основе исходной основы, мы должны сначала найти эти скрытые файлы и внести изменения.
Некоторые разработчики переходят прямо в Node_Modules, чтобы найти WebPack.config ... и другие файлы, затем вносить изменения, а затем выяснить, но когда мы изменены, мы установили некоторые другие проектные модули, а затем переписаны. С оригиналом Информация о конфигурации (проблема с головной болью, вы не можете иметь новый модуль каждый раз, когда вы устанавливаете новый модуль, вам нужно изменить конфигурацию ...)
После того, как проект будет создан на основе приложения create-react-app, будет предоставлена команда извлечения ($ yarn eject).На основе этой команды можно отобразить скрытые файлы веб-пакета, чтобы облегчить нашу вторичную настройку.
$yarn eject или npm run eject Выполнение этой команды необратимо (используйте с осторожностью)
После завершения выполнения мы видим, что каталог исходной структуры претерпел некоторые изменения (добавлены две новые папки, а также изменилось содержимое package.json)
结构更改
my-app
|-- config //webpack的配置文件都在这里
| |--jest
| | |--cssTransform.js
| | |--fileTransform.js
| |--env.js
| |--paths.js
| |--polyfills.js
| |--webpack.config.dev.js
| |--webapck.config.prod.js
| |--webpackDevServer.config.js
|
|--scripts
| |-- build.js
| |-- start.js
| |-- test.js
后期如果想修改配置信息，修改webpack.config.dev.js、webpack.config.prod.js即可，当然其它的大家也可以去修改(前提是研究明运行的原理)
package.json中的变更
{
"name": "my-app2",
"version": "0.1.0",
"private": true,
"dependencies": { //=>在依赖项中把之前隐藏的（已经安装的）模块都显示出来了，其中很多都是配置webpack需要安装的
"autoprefixer": "7.1.6",
"babel-core": "6.26.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.2",
"babel-preset-react-app": "^3.1.1",
"babel-runtime": "6.26.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"css-loader": "0.28.7",
"dotenv": "4.0.0",
"dotenv-expand": "4.0.1",
"eslint": "4.10.0",
"eslint-config-react-app": "^2.1.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.39.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.4.0",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.5",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",
"promise": "8.0.1",
"raf": "3.4.0",
"react": "^16.2.0",
"react-dev-utils": "^5.0.0",
"react-dom": "^16.2.0",
"redux": "^3.7.2",
"style-loader": "0.19.0",
"sw-precache-webpack-plugin": "0.11.4",
"url-loader": "0.6.2",
"webpack": "3.8.1",
"webpack-dev-server": "2.9.4",
"webpack-manifest-plugin": "1.3.2",
"whatwg-fetch": "2.0.3"
},
"scripts": { //=>去掉了eject命令（这个命令是不可逆转的，执行一次生效后，就去掉这命令了）
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom"
},
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx,mjs}"
],
"setupFiles": [
"<rootDir>/config/polyfills.js"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
"<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
],
"testEnvironment": "node",
"testURL": "http://localhost",
"transform": {
"^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web"
},
"moduleFileExtensions": [
"web.js",
"mjs",
"js",
"json",
"web.jsx",
"jsx",
"node"
]
},
"babel": {
"presets": [
"react-app"
]
},
"eslintConfig": {
"extends": "react-app"
}
}
Если вы разбираетесь в настройке веб-пакета, вы можете самостоятельно расширить веб-пакет...
generator-z-react-cli
Строительные леса на основе генератора йоменов: http://yeoman.io/ 1. Сначала установите yoman глобально на основе npm
npm install -g yo
2. Во-вторых, установите леса под глобальным
npm install -g generator-z-react-cli
3. Проект окончательного поколения
yo z-react-cli
结构目录
my-app
|-- index.html //启动页(主页)
|-- build //构建目录，遵循发布系统规范
| |-- index.html //静态页面
| |-- static //资源文件发布到cdn,或发布到服务器
|
|-- src //源码目录
| |--component // 组件
| | |-- common //公共组件
| | |-- temp //父组件
| |--Config //工具方法
| |--Image //图片资源
| |--Redux //react-redux数据状态管理
| | |-- action.jsx //派发数据的action
| | |-- reducer.jsx //用于处理action的reducer
| | |-- store.jsx //数据管理器
| |-- Router //路由
| |-- Style //样式
| |-- template //编译html模板
| |-- App.jsx //js入口文件
|
|-- webpack.config.hot //本地热编译
|-- webpack.config.buildt //编译发布测试环境
|-- webpack.config.online //编译发布线上环境
|-- server.js
|-- server_hot.js //本地服务器启动文件
|-- .babelrc //ES6语言解析设置
|-- package.json //项目依赖项
|-- ...
可执行命令
Установить зависимости
npm install
Обеспечьте горячую перезагрузку на локальном хосте (порт 8088): то есть введите http://localhost:8088 для доступа к разрабатываемому проекту.
npm run hot
#Общая компиляция и развертывание проекта используются для тестовой среды npm запустить сборку
#Общая компиляция и развертывание проекта используется в онлайн-среде нпм запустить онлайн
功能特色
Может анализировать синтаксис JSX Может анализировать новые функции грамматики ES6. Поддержка препроцессора LESS, SCSS После завершения компиляции браузер откроется автоматически. Отдельные файлы стилей CSS Поддержка штампа файла MD5, решение проблемы с файловым кэшем Поддержка компиляции ресурсов, таких как изображения, шрифты значков и т. д. Поддержка отладки исходного кода браузера Внедрение горячих обновлений на уровне компонентов Реализуйте горячую замену кода, и браузер обновляет эффект просмотра в режиме реального времени. Различать среду разработки и производственную среду, отдельный код бизнес-функции и общий код зависимостей. ...
Частичный предварительный просмотр файла package.json
{
"name": "my-app", //=>项目名称
"version": "1.0.0", //=>项目版本
"description": "...", //=>项目描述
"main": "index.js", //=>项目入口文件
"scripts": { //=>可执行的命令脚本
"dev": "node server.js", //=>启动服务
"hot": "node server_hot.js", //=>项目本地预览
"buildt": "webpack --config webpack.config.buildt.js --progress --colors --watch -p", //=>项目编译：用于测试
"online": "webpack --config webpack.config.online.js --progress --colors --watch -p" //=>项目编译：用于线上
},
...
"dependencies": { //=>生产依赖模块
"babel-polyfill": "^6.23.0",
"body-parser": "^1.17.1",
"deep-extend": "^0.4.1",
"github-markdown-css": "^2.4.0",
"immutable": "^3.8.1",
"isomorphic-fetch": "^2.2.1",
"normalize.css": "^4.1.1",
"pure-render-decorator": "^1.2.1",
"react": "^15.5.4",
"react-dom": "^15.3.2",
"react-redux": "^4.4.5",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"redux": "^3.6.0",
"redux-immutablejs": "^0.0.8",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.1.0",
"sass-loader": "^4.1.1"
},
"devDependencies": { //=>开发依赖模块
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.23.1",
"babel-loader": "^6.2.8",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-react-hmre": "^1.1.1",
"babel-preset-stage-0": "^6.16.0",
"body-parser": "^1.15.1",
"browser-sync": "^2.18.8",
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.23.1",
"express": "^4.14.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-webpack-plugin": "^2.22.0",
"http-proxy-middleware": "^0.17.3",
"jsx-loader": "^0.13.2",
"less": "^2.6.1",
"less-loader": "^2.2.3",
"node-sass": "^3.11.3",
"react-hot-loader": "^1.3.1",
"react-transform-catch-errors": "^1.0.2",
"react-transform-hmr": "^1.0.4",
"redbox-react": "^1.3.3",
"sass": "^0.5.0",
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.13.0",
"webpack-dev-middleware": "^1.8.4",
"webpack-dev-server": "1.14.1",
"webpack-hot-middleware": "^2.13.2"
}
}
Этот скаффолдинг предоставляет более богатые функции, чем приложение create-react-app, и вы можете выбирать в соответствии со своими предпочтениями.