Steamerjs

steamer-plugin-pro

多框架管理工具

NPM Version Travis Deps Coverage

安装

npm i -g steamerjs

npm i -g steamer-plugin-pro

项目结构

通常来说，会有两种的项目结构

  • 兄弟结构

Main Porject
	|---- A Project 
	|---- B Project
  • 父子结构
    • 默认, steamer-plugin-pro 只会搜索到第2层

Main Project 
	|
	|---- A Project 
	  |
	  |---- B Project

初始化

如果你希望 steamer-plugin-pro 自动检测你的项目，你需要适当改动你的子项目的 package.json。 下面的 name, start 和 dist 就是会使用到的值。

{
  "name": "steamer-project",
  "scripts": {
  	"start": "",
  	"dist": "",
  },
}

下面是一个展示的例子, steamer-plugin-pro 会生成 steamer-plugin-pro.js 配置文件.

steamer pro -i

or 

steamer pro --init

// 父项目为第0层，一直搜索到第4层
steamer pro -i -l 4

or

steamer pro --init --level 4

// 无论 `steamer-plugin-pro.js` 配置文件是否存在，直接覆盖
steamer pro -i -f

or

steamer pro --init --force

package.json中的 name 值，直接作为 project 的值. package.json 里的 scripts中，start 和 dist 被用于配置中的 cmds 值。

src 值，则表示子项目文件的相对位置。

module.exports = {
    "plugin": "steamer-plugin-pro",
    "config": {
        "projects": {
            "steamer-project": {
                "src": "project",
                "cmds": {
                    "start": "",
                    "dist": ""
                }
            },
            "steamer-koa": {
                "src": "koa",
                "cmds": {
                    "start": "node-dev ./app.js",
                    "dist": ""
                }
            },
            "steamer-model": {
                "folder": "model",
                "cmds": {
                    "start": "gulp&&node ./webpack.server.js",
                    "dist": "gulp sprites&&export NODE_ENV=production&&webpack"
                }
            },
            "steamer-react": {
                "folder": "react",
                "cmds": {
                    "start": "gulp&&node ./webpack.server.js",
                    "dist": "gulp sprites&&export NODE_ENV=production&&webpack"
                }
            }
        },
        "steps": {
            "start": {},
            "dist": {}
        }
    }
}

开发或发布你的项目

  • 开发项目
// 开发所有项目
steamer pro -s 

or 

steamer pro --start

// 只开发特定项目

steamer pro -s steamer-react

or 

steamer pro --start steamer-react
  • 发布项目
// 发布所有项目
steamer pro -d 

or 

steamer pro --dist

// 只发布特定项目

steamer pro -d steamer-react

or 

steamer pro --dist steamer-react

你也可以设置以下的回调函数，config 会作为参数传递到回调函数中。

  • config.currentProject

    • 当前子进程的执行的项目

  • config.isEnd

    • 只会在 finish 回调中出现, 如果是 true, 表示所有子进程结束
"steps": {
    "start": {
        start: function(config) {       // 命令开始
            console.log("=====start=====");
            console.log(config);
        },
        finish: function(config) {      // 命令结束
            if (config.isEnd) {
                console.log("======end=====");
            }
        }
    },
    "dist": {
        start: function(config) {       // 命令开始
            console.log("=====start=====");
            console.log(config);
        },
        finish: function(config) {      // 命令结束
            if (config.isEnd) {
                console.log(config);
            }
        }
    }
}

有时候，你会希望将各个子项目中的 dist 文件夹中的文件，全部放置到父项目文件夹的某个文件夹中，这时，首先你可以在各个项目的配置中，添加 dist 字段，记录子项目的 dist 目录将会生成父项目的某个文件夹，如下，设置 dist 的值为 dist 表示，将子项目的dist目录，将生成到父项目的dist目录下。插件强制规定子项目线上代码必须放在dist中（符合steamer` starter kit 的规范），你无法定制。

"projects": {
    "steamer-react": {
        "src": "steamer-react",
        "dist": "dist",
        "cmds": {
            "start": "node ./tools/start.js",
            "dist": "node ./tools/dist.js"
        }
    },
    "steamer-simple": {
        "src": "steamer-simple",
        "dist": "dist",
        "cmds": {
            "start": "node ./tools/start.js",
            "dist": "node ./tools/dist.js"
        }
    }
},

然后，当 steamer pro -d 编译结束后，在调用 steps.dist.finish 回调时，调用插件内置的方法 this.copyToDist，如下，插件会帮你完成此功能：

...
"steps": {
    "start": {},
    "dist": {
        start: function(config) {
            console.log("=====start=====");
            // console.log(config);
        },
        finish: function(config) {    
            if (config.isEnd) {
                this.copyToDist();
            }
        }
    }
}

如果你想进行深度定制，你可以通过 config 参数，获取各项目的相关位置信息，然后自己进一步写逻辑定制。

开发

// 将此模块链接到全局下
npm link

// 进入specPlugin中，在project2/steamer-simple, project2/steamer-react, project3/steamer-simple中安装依赖

// 运行测试用例
npm i -g eslint // 安装eslint

npm test

← 假数据模拟 - Mock →