saga-cli 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
saga-cli 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
saga-cli 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 GPL
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
所属分类 开发工具项目构建
开源组织
地区 国产
投 递 者 jojowwbb
适用人群 未知
收录时间 2017-11-17

软件简介

Saga-Cli

版本:1.0.6

用于快速创建React Saga项目

Install

npm install -g saga-cli

Start

直接开始:初始化一个纯净的项目(只有核心代码、推荐大神使用)

saga-cli init TestProject

或者

(推荐) 初始化一个带默认示例的业务项目(saga、router、bundle都集成了)

saga-cli demo TestProject

或者查看帮助

saga-cli --help

Example

  随便进入到一个目录:
    $ saga-cli init SagaTest
  执行完成后:
    $ cd SagaTest
    $ npm install
  启动项目:
    $ npm run dev      //开发环境
  或者:
    $ npm run build    //用于生产环境代码打包

SAGA-CLI 默认模板项目

项目集成

//webpack
npm install --save-dev webpack
npm install --save-dev webpack-dev-server

//react 
npm install --save react react-dom
//router v4版本
npm install --save react-router react-router-dom
//redux
npm install --save redux react-redux redux-saga

//babel
npm 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模块直接生成Store
var 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 
        {(Container) => }
    
}

const RouterAbout=(props)=>{
    return 
        {(Container) => }
    
}


/**
 * 按照正常路由配置、配置组件
 * @Author   WangBing
 * @DateTime 2017-11-24
 * @returns  {[type]}   [description]
 */
export default () => {
    return 
            
            
            
        

}
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击引领话题📣 发布并加入讨论🔥
暂无内容
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
暂无内容
0 评论
2 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部