项目地址
目的
日常开发中，不同的项目里我们使用相同的技术栈。大部分的做法是把项目1的代码拷贝到项目2里面来，然后删删改改，开始写新的业务需求。
所以我想构建自己的一个base项目，和create-react-app,vue-cli 手脚架一样，直接敲一行命令构建一个项目。然后直接写业务需求，而不是前面的复制粘贴。
市场上有很多优秀的手脚架，但是我需要一个创建适合自己定制的手脚架，所以我就创建了这个项目。
这个项目分两个仓库，一个仓库构建cli程序，一个项目构建base代码
Cli
构建一个node 命令行，初期功能在于创建前端react,后端koa 的应用程序
手脚架地址
https://github.com/ThreesomeWiki/react-koa-cli
依赖
-
commander: 封装了
解析命令行参数，处理相关回调的工具 -
shelljs: node的shell工具，封装了很多类shell 的 api
-
Inquirer.js: 命令行的交互工具。支持
输入,输出，选择等 -
chalk： 提供命令行不同颜色输出
思路
1.提示用户输入构建的项目名
2.检查项目名是否已存在当前目录
3.如果存在，提示用户是否覆盖
4.如果用户支持覆盖，删除源目录，从仓库拉取项目base代码，删除base代码 .git文件夹
commander代码
解析CLI
commander.option('-v --version', 'prient nodecli verison', () => {
console.log(require('./package.json').version);
});
commander.command('init').action(async () => {
});
commander 提供各种命令行参数解析。支持参数形式option,也支持命令形式action,还支持action的 option 形式。
如上支持两种命令：react-koa-cli -v, react-koa-cli init。
commander 有默认的命令：-h,--help。 输入 react-koa-cli -h 你可以看到这个命令支持的各种参数和提示。help 和 h 等效。后者是前者的简写。注意简写只能是一个英文单词，区分大小写，不可重复。
inquirer代码
与用户交互，获取用户输入内容，或者用户选择内容
const action = [];
// 输入模块名
action.push({
type: 'input',
name: 'moduleName',
message: '请输入模块名称',
validate: function(input) {
if (!input) {
return '输入不能为空';
}
return true;
},
});
const answer = await inquirer.prompt(action);
如上所示，与用户交互，获取用户输入信息answer。同时inquirer支持输入校验
shell
各种Linux操作
// 获取当前目录
shell.pwd()
// 创建文件夹
shell.mkdir(moduleName);
// 删除文件夹
shell.rm('-rf', modulePath)
// 抵达指定目录
shell.cd(modulePath);
// 执行shell 指令
shell.exec(`xxxxx}`);
BaseModule
一个 react 与 koa 的项目接口。前后端没有太多的耦合性。这里简单说下项目结构，因为是个人或者公司的base_module，而非共用的项目，所以太具体的我就不细说，刚兴趣的可以看看代码，之后的重要更新都在这个BaseModule,如果有新的CLI需求，才会跟新手脚架。
项目地址
https://github.com/ThreesomeWiki/react-koa
结构
-
api : 接口目录
- config: 全局配置文件: 监听端口，DB 配置，Redis配置等
- controller: 接口的具体实现
- log : 日志
- middleware: 中间件目录
- model: model 声明，这里主要是MYSQL 表申明，用的
sequelizeorm - router： 路由声明
- index.js : 入口文件
-
config: 前端webpack 配置文件
-
www: 前端代码
总结
这里构建的是一个react-koa-cli。如果下次有其他架构的组合，也可以采用这种模式。
下次更新我想让这个CLI支持插槽式的各种搭配，比如让用户选择是使用react,还是使用Vue，使用sass 还是使用 less 。等我有心情再做吧。
网友评论