简介
generator-react-shinezone 是一个用于生成 React 应用的 Yeoman Generator npm 包。它可帮助你快速创建一个全新的、基于 React 技术栈的应用程序，并且已经内置了常用的代码组织结构，例如 Redux 状态管理、React Router 页面导航、Webpack 打包等等，省去了手动搭建项目的繁琐步骤。同时，它也可以按需增加常用的 React 组件库（例如 Ant Design 等）和 JavaScript 引擎（例如 TypeScript 等），以适应不同的业务需求。
本文将会基于如下的开发环境和技术栈进行介绍：
- Node.js: v10.0.0 或以上版本
- npm: v6.0.0 或以上版本
- React: v16.0.0 或以上版本
- Redux: v4.0.0 或以上版本
- React Router: v5.0.0 或以上版本
- Webpack: v4.0.0 或以上版本
- generator-react-shinezone：v1.0.0
安装
首先，你需要全局安装 yo 和 generator-react-shinezone：
npm install -g yo generator-react-shinezone
之后，就可以通过如下命令来创建一个新的项目了：
yo react-shinezone
根据提示输入一些基本信息之后，就可以完成项目的创建了。
目录结构
创建成功之后，项目的目录结构如下所示：
-- -------------------- ---- ------- - --- ---- - ---- - --- ----------- - ----- -- - --- ------ - ---- - --- ------ - ----- ----- - --- ------- - --- - --- ------ - ---- - --- ------ - ------ - --- ---------- - ---- ---- --- -------------- - ------ ---- --- ---------- - --- ---- --- ------------ - ----- --- -- --- --------- - ---- --- ----------------- - ------- ---- --- -------------- - ------- ------ --- --------------- - ------- ------
其中，src 目录下是项目的源码，app.js 作为程序的入口文件，index.html 则是 HTML 模板文件。同时，还有 components、pages、store、styles 和 utils 等目录，分别用于放置 React 组件、页面视图、Redux 状态管理器、样式表和工具函数等内容。
命令行选项
在创建项目时，可以通过给 yo react-shinezone 命令传入不同的选项，从而实现按需生成不同的文件和配置。目前支持的选项有：
--typescript：增加 TypeScript 支持--antd：增加 Ant Design 组件库支持--suite：增加测试框架 Jest 和 enzyme 支持
使用举例：
yo react-shinezone --typescript --antd --suite
上述命令将生成一个包含 TypeScript、Ant Design 和测试框架（Jest 和 enzyme）的 React 项目。
开发
完成项目的创建之后，就可以开始进行开发了。
在命令行中执行以下命令来启动项目：
npm start
该命令将会启动一个本地的开发服务器，监听默认的 3000 端口，然后就可以通过浏览器访问 http://localhost:3000 来查看页面了。
在开发过程中，可以通过修改 src 目录下的代码来实现页面的修改和调试。对于 components、pages、store、styles 和 utils 等目录的命名，只是为方便组织代码而设定的，可以根据实际需求来进行调整。
在开发过程中，还可以使用以下的 npm 脚本：
npm run build: 用于构建生产环境的静态资源npm run watch: 监听文件变化，并构建最新的开发环境代码npm run test: 执行测试用例
部署
当开发完成之后，可以通过下面的命令来构建生产环境的代码：
npm run build
该命令将会在项目根目录下生成一个 dist 目录，其中 index.html 文件作为 HTML 模板文件，引用了 bundle.js 和 index.css 两个静态资源文件。可以将整个 dist 目录拷贝到部署服务器上，通过静态文件服务器进行访问。
总结
本文介绍了如何使用 generator-react-shinezone 这个 npm 包来快速创建、开发和部署一个 React 应用程序。通过对其命令行选项、目录结构和 npm 脚本等功能的详细介绍，读者可以快速掌握如何使用这个包，并根据实际需求进行拓展开发。
示例代码可以参考 generator-react-shinezone 项目的 GitHub 页面，也可以直接在 npm 上下载。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005626181e8991b448dfa6f