generator-hyfe/README.md

海云数据前端项目脚手架

# 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行<div id="container">html</div> 替换成"<div id="container"><%- html %></div>"
- 在第9行处添加如下内容：
    ```
    <script type="text/javascript" charset="utf-8">
      window.__INITIAL_STATE__ = '<%= initialState %>';
    </script>

    <% scriptsUrls.forEach(function(src){ %>
      <script src="<%= src %>"></script>
    <% }) %>
    ```