开源软件名称:saga-cli
开源软件地址:https://gitee.com/jojowwbb/saga-cli
开源软件介绍:
saga-cli版本:1.0.6 用于快速创建React Saga项目 Installstart直接开始:初始化一个纯净的项目(只有核心代码、推荐大神使用) saga-cli init TestProject 或者 (推荐 ) 初始化一个带默认示例的业务项目(saga、router、bundle都集成了) saga-cli demo TestProject 或者查看帮助 Example 随便进入到一个目录: $ saga-cli init SagaTest 执行完成后: $ cd SagaTest $ npm install 启动项目: $ npm run dev //开发环境 或者: $ npm run build //用于生产环境代码打包 saga-cli 默认模板项目项目集成//webpacknpm install --save-dev webpacknpm install --save-dev webpack-dev-server//react npm install --save react react-dom//router v4版本npm install --save react-router react-router-dom//reduxnpm install --save redux react-redux redux-saga//babelnpm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015 babel-preset-stage-0 babel-preset-stage-3 项目结构project│ .babelrc│ .gitignore│ package.json│ README.md│ test.txt│ webpack.config.js│ └─src │ app.jsx # 项目初始化 │ main.jsx # 项目入口 │ template.html # 自动生成页面的模板 │ ├─common │ │ util.js # Redcer工具方法 │ │ wish.js # 自用工具方法:fetch │ │ │ ├─api │ │ index.js # action type映射接口url │ │ │ └─styles │ app.less │ theme.less │ ├─layout │ │ Header.jsx # 布局组件(业务相关) │ │ RouteLayout.jsx # 根路由配置组件(业务相关) │ │ SilderLayout.jsx # 侧边栏组件(业务相关) │ │ │ └─styles │ layout.less │ ├─router # 由于这里按路由划分模块、所以使用router命名 │ │ reducer.js # 模块公用的reducer │ │ │ ├─about │ │ index.jsx # about业务模块组件、没有实际业务 │ │ │ └─home │ │ actions.jsx # home模块的actions配置 │ │ index.jsx # home模块的主业务容器组件 │ │ reducer.js # home模块的reducer定义 │ │ │ ├─components # home模块的所用到的组件 │ │ ArticleCollect.jsx │ │ ArticleEdit.jsx │ │ ArticleList.jsx │ │ │ └─styles │ index.less │ └─saga core.js # saga核心包 说明部分代码说明 初始化saga/** * 我封装的常用工具方法 * 1 axios封装的fetch */import wish from 'src/common/wish';/** * 我封装的SagaCore模块 * 1 创建Store * 2 创建Saga * 3 内置默认reducer信息 */import SagaCore from 'src/saga/core';/** * 接口url和action type的映射关系模块 */import urls from 'src/common/api/index';/** * 所有模块的reducer */import AppReducer from 'src/router/reducer';import HomeReducer from 'src/router/home/reducer';const reducer={ app:AppReducer, home:HomeReducer}wish.bindUrls(urls);wish.create();//通过SagaCore模块直接生成Storevar Store=SagaCore.init(reducer,function(action={data:{}}){ return wish.fetch({name:action.type,...action.data},action.method).then((res)=>res);}) 新增reducer在main.jsx中直接引入,如: import AppReducer from 'src/router/reducer';import HomeReducer from 'src/router/home/reducer';+import UserReducer from '...'const reducer={ app:AppReducer, home:HomeReducer,+ user:UserReducer} 按需加载/** * 加载模块的根业务组件 */import HomeContainer from 'bundle-loader?lazy!src/router/home/index';import AboutContainer from 'bundle-loader?lazy!src/router/about/index';/** * Bundle加载业务组件 * @Author WangBing * @DateTime 2017-11-24 * @param {[type]} props [description] * @returns {[type]} [description] */const RouterHome=(props)=>{ return <Bundle load={HomeContainer}> {(Container) => <Container {...props}/>} </Bundle>}const RouterAbout=(props)=>{ return <Bundle load={AboutContainer}> {(Container) => <Container {...props}/>} </Bundle>}/** * 按照正常路由配置、配置组件 * @Author WangBing * @DateTime 2017-11-24 * @returns {[type]} [description] */export default () => { return <Switch> <Route exact path="/" component={RouterHome}/> <Route path="/home" component={RouterHome} /> <Route path="/about" component={RouterAbout} /> </Switch>} |
请发表评论