# saga-cli

> React Saga项目搭建脚手架工具

Latest version **1.0.6** (published 2017-11-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install saga-cli
pnpm add saga-cli
yarn add saga-cli
bun add saga-cli
```

Provides the command `saga-cli`.

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2017-11-24 |
| First published | 2017-11-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | maomaohou |

## Links

- npm: https://www.npmjs.com/package/saga-cli
- npm.io page: https://npm.io/package/saga-cli

## Dependencies (2)

- [commander](https://npm.io/package/commander.md) ^2.11.0
- [download-git-repo](https://npm.io/package/download-git-repo.md) ^1.0.1

## Recent versions

- 1.0.6 (latest) — 2017-11-24
- 1.0.5 — 2017-11-17
- 1.0.4 — 2017-11-17
- 1.0.3 — 2017-11-17
- 1.0.2 — 2017-11-17
- 1.0.1 — 2017-11-13
- 1.0.0 — 2017-11-13

## README

## 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 <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>

    }

---
_Source: https://npm.io/package/saga-cli · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._