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>
  <% }) %>