wym-react-cli

wym react web 脚手架

特性

• 基于react16，ant-design，react-router4，redux 企业级web系统最佳实践。
• 基于 Antd UI 设计语言，提供后台管理系统常见使用场景。
• 使用wym-react-build本地调试和构建，其中 Mock 功能实现脱离后端独立开发。

更新日志

1.0.13

2018-6-5

• 添加pwa支持，默认不开启
• 支持路由拆分

1.0.8

2018-5-26

• 添加readme
• 尽可能的保持antd的设计语言。

开发构建

目录结构

├─config                  # 项目打包构建配置目录
│      index.js
│      
├─dist                    # 项目打包输出目录
│  │  asset-manifest.json
│  │  favicon.ico
│  │  index.html
│  │  manifest.json
│  │  service-worker.js
│  │  
│  └─static
│      ├─css
│      │      app.1.0.0.3d3bffb636aaa4980638031824a5087b.css
│      │      app.1.0.0.3d3bffb636aaa4980638031824a5087b.css.map
│      │      
│      └─js
│              0.1.0.0.cd4d22c125a5e7b9a016.js
│              0.1.0.0.cd4d22c125a5e7b9a016.js.map
│              1.1.0.0.cbe2fe044fab28d0bc18.js
│              1.1.0.0.cbe2fe044fab28d0bc18.js.map
│              app.1.0.0.70d324ad4dfa2b78763d.js
│              app.1.0.0.70d324ad4dfa2b78763d.js.map
│              manifest.1.0.0.d826c1cb9dc9be6dcd29.js
│              manifest.1.0.0.d826c1cb9dc9be6dcd29.js.map
│              vendor.1.0.0.31afbf5756dc97879958.js
│              vendor.1.0.0.31afbf5756dc97879958.js.map
│              
├─public                   # 项目模板资源目录
│      favicon.ico
│      index.html
│      manifest.json
│      
└─src                       # 项目源码目录
    │  index.js
    │  registerServiceWorker.js
    │  
    ├─assets                # 项目静态资源目录
    │      logo.svg
    │      
    ├─scripts               # 项目js代码目录
    │  │  Main.js
    │  │  
    │  ├─actions            # redux actions代码目录
    │  │  ├─about
    │  │  │      index.js
    │  │  │      
    │  │  └─home
    │  │          index.js
    │  │          
    │  ├─components         # react 组件目录
    │  │  └─dataTable
    │  │          index.js
    │  │          
    │  ├─containers         # redux containers目录
    │  │  ├─about
    │  │  │      app.js     # app.js为页面级应用
    │  │  │      index.js   # index.js为路由拆分入口文件
    │  │  │      
    │  │  └─home
    │  │          app.js
    │  │          index.js
    │  │          
    │  ├─reducers           # redux reducers目录
    │  │  │  index.js
    │  │  │  
    │  │  ├─about           # redux 拆分 reducer目录 (该目录为演示demo)
    │  │  │      index.js
    │  │  │      initialState.js
    │  │  │      
    │  │  └─home
    │  │          index.js
    │  │          initialState.js
    │  │          
    │  ├─store              # redux store目录
    │  │      index.js
    │  │      
    │  └─util               # 项目util js目录
    │          cookie.js
    │          loading.js
    │          
    └─styles                # 项目样式文件目录
            animation.less
            default.less
            global.less
            test1.scss
            test2.css
         

说明:

• components：组件（方法）为单位以文件夹保存，组件名首字母大写（如DataTable），方法首字母小写（如layer）,文件以index.js导出对象（如./src/components/dataTable/index.js）。
• 文件夹名称小写，以index.js暴露入口
• containers文件夹下为页面级应用，每个页面以一个子文件夹包裹，其中app.js为页面应用，index.js为拆分路由组件

快速开始

安装脚手架:

npm install -g wym-react-cli 

进入目录初始化项目:

#国内用户推荐yarn或者cnpm
wym-react-cli init <ProjectName> 

命令行选择工程名称，作者名称，是否自动安装依赖

开发：

npm start
打开 http://localhost:8000 #端口在工程目录config/index.js   dev.port修改

构建测试包：

npm run test

将会打包至dist目录 
测试包静态文件命名规则,以js为例： [name.version.cversion.hash.js]

构建生产包：

npm run dist

将会打包至dist目录 
生产包静态文件命名规则,以js为例： [name.version.hash.js]

代码检测：

npm run lint

代码修复：

npm run fix

pwa应用

默认不开启service-worker，如要开启可按如下步骤操作

1. src/index.js修改如下

import React from 'react';
import ReactDOM from 'react-dom';
import Main from './scripts/Main';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<Main />, document.getElementById('app'));
registerServiceWorker();

2. config 配置文件 build项设置 useServiceWorker:true

FAQ