Yeoman generator for ReactJS - lets you quickly set up a project including karma test runner and Webpack module system.
react脚手架(react+redux+react-router+eslint+karma+react devTools)
基于YeoMan的react脚手架生成,改造
另外推荐地址:react-starter-kit
├── README.md # 项目README文件
├── conf # 配置文件夹
│ └── webpack # webpack配置(下面包括开发、生产、测试环境的配置)
├── karma.conf.js # karma测试配置文件
├── node_modules # 包文件夹
├── package.json # 包描述文件
├── src # 源文件夹
│ ├── actions # redux actions文件夹
│ ├── client.js # 客户端启动文件
│ ├── components # 项目组件(下面分为业务组件和公共组件)
│ ├── config # 环境配置文件夹(指明当前环境)
│ ├── containers # 入口容器
│ ├── exports.js # 常用组件的exports文件,可以忽略
│ ├── images # 图片
│ ├── index-release.html # 生产环境模板文件
│ ├── index.html # 开发环境入口html
│ ├── reducers # redux reducers文件夹
│ ├── routes # 路由配置
│ ├── sources # 资源文件(可忽略)
│ ├── static # 静态文件(可以存放第三方库)
│ ├── stores # redux stores文件夹
│ ├── styles # 全局样式文件夹
│ └── views # 视图文件夹
├── test # 测试文件夹
│ ├── actions # 测试actions
│ ├── components # 测试组件
│ ├── config # 测试配置(检测环境)
│ ├── loadtests.js # 加载测试文件
│ ├── reducers # 测试reducers
│ ├── sources # 测试资源(flux datasource)
│ └── stores # 测试stores
└── webpack.config.js # webpack配置入口文件
- react
- redux
- react-router(4.0.0^,可以换成2x或者3x)
- eslint
- karma + mocha
- immutable(可选)
- 路由(react-router)
- 调试工具(react devTools)
- 增加文件分类(images/fonts/media)
- 生产配置增加文件hash,公共库拆分
- 添加异步middleware,统一处理全局状态
- 改造Actions/Reducers
// 启动应用
npm start // or
npm run serve
// 生成静态生产文件
npm run dist
// 运行测试案例
npm test
// 启动应用
npm start // or
npm run serve
// 用服务器运行生产版本
npm run serve:dist
// 生成静态生产文件
npm run dist
// 运行测试案例
npm test
// 自动运行单元测试(文件改动时)
npm run test:watch
// eslint 运行源码文件(获取测试结果)
npm run lint
// 清除dist文件夹
npm run clean
// 拷贝静态文件
npm run copy