generator-hyfe
通用React项目脚手架
Getting Started
Installation
$ npm install -g yo
$ npm install -g generator-hyfe
Usage
$ yo hyfe [--force]
**说明:**force选项可自动处理冲突,也可以选择手动处理。
执行yo hyfe指令后,根据提示输入或选择相应的参数内容。
参数说明:
- Your Project Name: 项目名
- 项目类型: 可选React服务端渲染或客户端渲染
- Git repository: git地址
- Description: 项目描述
- Author: 开发者姓名
- Keywords: 关键词
- Are you sure you create the project now: 选择y,则开始创建项目
创建成功后,控制台会显示对应的提示信息。
项目技术栈
- express
- react
- redux
- webpack
- postcss
- scss
- gulp
- babel
- superagent
- immutable
运行项目
创建完项目以后,进入到项目目录,根据当前环境执行相应的操作。
开发环境
开发环境执行如下指令:
$ npm install
$ npm start
访问localhost:3000。
线上部署
线上部署时候,执行以下操作:
$ npm install
$ npm run build
$ pm2 start app.json --env production
内容替换
生成开发框架二以后,需要替换app/server/views/index.ejs中的几处内容:
- 将img目录拷贝到app/public下
- 第5行href="cssUrls" 替换成href="<%= cssUrls %>"
- 第8行html替换成"<%- html %>"
- 在第9行处添加如下内容:
<script type="text/javascript" charset="utf-8"> window.__INITIAL_STATE__ = '<%= initialState %>'; </script> <% scriptsUrls.forEach(function(src){ %> <script src="<%= src %>"></script> <% }) %>