简介
generator-react-material-redux-webpack 是一款基于 Yeoman 的生成器，用于快捷地搭建 React + Material UI + Redux + Webpack 的项目结构。它能够为你带来更高效的开发体验，并帮助你规范地开发前端项目。
安装
首先，你需要在本地系统中安装 Yeoman：
--- ------- -- --
然后，你就可以安装 generator-react-material-redux-webpack 了：
--- ------- -- --------------------------------------
使用
在你的项目目录下运行以下命令：
-- ----------------------------
然后按照提示回答以下问题：
- 项目名称
- 项目描述
- 作者
- 是否需要 React Router
- 是否需要 Redux 中间件（支持 async/await）
- 是否需要 Prettier（代码格式化工具）
等待安装完成后，你可以通过以下命令启动开发服务器：
--- -----
你也可以使用以下命令构建项目：
--- --- -----
生成的代码将会保存在 dist 目录中。
配置
generator-react-material-redux-webpack 内置了许多配置项，你也可以通过修改生成的项目中的配置文件来自定义项目。
Webpack 配置
Webpack 配置文件在 project/config/webpack 中，你可以根据自己的需求修改它。
DevServer 配置
DevServer 配置文件在 project/config/webpack/devServer.js 中。
Redux 配置
Redux 配置文件在 project/src/redux 中，包括 store 和 reducers。
Router 配置
Router 配置文件在 project/src/router 中，包括路由定义和导航。
Material UI 配置
Material UI 配置文件在 project/src/materialUI/theme.js 中，你可以修改它以定制主题。
示例代码
以下是一个简单的使用 generator-react-material-redux-webpack 生成的项目的示例代码（只包含核心代码）：
App.js
------ ----- ---- --------
------ - ------ - ---- -----------
------ - -------- - ---- --------------
------ - ----- - ---- ----------------
------ - ---------------- - ---- --------------------
------ - ----- - ---- ---------------------
-------- ----- -
------ -
--------- --------------
----------------- --------------
------- --
-------------------
-----------
--
-
------ ------- ----Router.js
------ ----- ---- --------
------ - ------ ------ - ---- -------------------
------ - -------- - ---- --------------------
------ ----- ------ - -- -- -
--------
------ ----- -------- -------------------- --
---------
--HomePage.js
------ ----- ---- --------
------ - ---------- - ---- --------------------
------ ----- -------- - -- -- -
--
----------- ------------------ -------------------
----------- --------------------
---- -- - ------ ----- - -------- -- - ----- --- --------- --
---------------------------------------
-------------
---
--总结
generator-react-material-redux-webpack 方便了我们搭建 React + Material UI + Redux + Webpack 的项目架构，使得我们能够更快速、规范化地进行前端开发工作。希望以上介绍能够帮助你尽快上手使用 generator-react-material-redux-webpack。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005668d81e8991b448e2cbd