基于 reactjs+redux+postcss+webpack2 的单页应用项目模板

1,511 阅读2分钟
原文链接: github.com

小贴士

  • 本项目 webpack 已升级至 webpack 2。
  • 本项目为了减少代码体积,用了 react-lite 代替 react js。您也可以直接使用 react js,请注释这段配置
  • 本项目还在优化中,但已经可以用于生产环境。
  • 如果您有好的意见或建议,请 issue。
  • 如果您觉得本项目对您有帮助,请给个 star,^_^。

一、介绍

基于 reactjs+redux+webpack2 的单页应用项目模板,功能包括:调试、构建、代码规范校验、单元测试、国际化等。

二、技术栈

react js、redux、es6、webpack 2、sass、postcss、css modules。

三、使用

1. 下载源码

git clone https://github.com/zhaotoday/react.git

2. 安装 npm 依赖包

npm install

3. 启动项目

npm start

4. JS 代码规范校验

npm run eslint

5. 单元测试

npm run test

6. 构建代码

npm run build

四、目录结构

- build             [webpack 调试与构建]
- src               [源码]
  └ app             [业务代码]
  └ components      [通用组件]
  └ i18n            [国际化]
  └ redux           [redux 数据流管理]
  └ routes          [路由配置]
  └ templates       [页面模板]
  └ themes          [全局样式]
  └ utils           [工具集合]
  └ entry.js        [入口文件]
- dist              [构建代码]
- test              [单元测试]

五、业务模块规范

业务模块代码放在:src/app 文件夹下,下面以登录(login)模块为例。

- login             [login 模块]
  └ index.js        [login 的入口文件]
  └ theme           [login 的皮肤]
    └ styles        [login 的样式]
      └ index.scss
    └ images        [login 的图片]
  └ components      [login 的相关组件]
  └ utils           [login 的相关工具集合]
  └ i18n            [login 的国际化]

六、通用组件规范

通用组件放在:src/components 文件夹下,规范和业务模块基本一致,下面以面板(panel)组件为例。

- panel             [panel 组件]
  └ index.js        [panel 的入口文件]
  └ theme           [panel 的皮肤]
    └ styles        [panel 的样式]
      └ index.scss
    └ images        [panel 的图片]
  └ components      [panel 的子组件]
  └ utils           [panel 的相关工具集合]
  └ i18n            [panel 的国际化]  

七、redux action type 常量规范

和 RESTful 的规范相对应,下面以文章(article)模型为例。

GET_ARTICLES        [获取文章列表]
GET_ARTICLE         [获取文章详情]
POST_ARTICLE        [新增文章]
PUT_ARTICLE         [修改文章]
DELETE_ARTICLE      [删除一篇或多篇文章]

未完待续...