日常开发中,不同的项目里我们使用相同的技术栈。大部分的做法是把项目1的代码拷贝到项目2里面来,然后删删改改,开始写新的业务需求。
所以我想构建自己的一个base项目,和create-react-app
,vue-cli
手脚架一样,直接敲一行命令构建一个项目。然后直接写业务需求,而不是前面的复制粘贴。
市场上有很多优秀的手脚架,但是我需要一个创建适合自己定制的手脚架,所以我就创建了这个项目。
这个项目分两个仓库,一个仓库构建cli
程序,一个项目构建base
代码
构建一个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
文件夹
解析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
等效。后者是前者的简写。注意简写只能是一个英文单词,区分大小写,不可重复。
与用户交互,获取用户输入内容,或者用户选择内容
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支持输入校验
各种Linux操作
// 获取当前目录
shell.pwd()
// 创建文件夹
shell.mkdir(moduleName);
// 删除文件夹
shell.rm('-rf', modulePath)
// 抵达指定目录
shell.cd(modulePath);
// 执行shell 指令
shell.exec(`xxxxx}`);
一个 react 与 koa 的项目接口。前后端没有太多的耦合性。这里简单说下项目结构,因为是个人或者公司的base_module
,而非共用的项目,所以太具体的我就不细说,刚兴趣的可以看看代码,之后的重要更新都在这个BaseModule,如果有新的CLI需求,才会跟新手脚架。
https://github.com/ThreesomeWiki/react-koa
api : 接口目录
sequelize
ormconfig: 前端webpack 配置文件
www: 前端代码
这里构建的是一个react-koa-cli
。如果下次有其他架构的组合,也可以采用这种模式。
下次更新我想让这个CLI支持插槽式的各种搭配,比如让用户选择是使用react,还是使用Vue,使用sass 还是使用 less 。等我有心情再做吧。