1.前言
继上一篇文章之后一个简单的React项目模板已经搭建好了&＃xff0c;这篇文章主要写一下简易脚手架以及业务模块的生成命令行&＃xff0c;以往我们使用较多的是vue-cli、create-react-app等开源脚手架&＃xff0c;但是这些脚手架不一定符合我们当前使用的环境&＃xff08;比如公司的通用脚手架&＃xff09;&＃xff0c;这个时候我们就需要针对使用环境搭建一个脚手架&＃xff0c;来提升整体的开发效率。
为什么要使用脚手架&＃xff1f;简单描述几点&＃xff1a;
- 减少重复的工作&＃xff0c;不需要在内部通过ctrl&＃43;c、ctrl&＃43;v的方式复制项目结构
- 可以保持整个工程的项目结构以及编码规范保持一致等
......
仓库代码地址&＃xff1a;https://github.com/huhaiqing106/MyProject/tree/master/DemoCli
2.支持的功能
这个脚手架写的比较简单&＃xff0c;主要实现了两个功能&＃xff1a;
work init 根据可选仓库拉取远程模板&＃xff0c;初始化一个项目work create 根据GIT仓库拉取业务模块模板&＃xff0c;生成业务木块项目结构&＃xff08;这个模板没有实现功能&＃xff0c;可以从这些方面去入手&＃xff0c;比如包含一个标砖的查询界面或者内置一些通用的方法增、删、查、改等&＃xff0c;可以快速构建一个简单的查询界面&＃xff09;
3.初始化项目
3.1.安装依赖
yarn add chalk commander download-git-repo inquirer node-svn-ultimate ora --dev
chalk修改控制台输出内容样式
commander命令行工具
download-git-repo从GIT拉取远程模板
inquirer交互式命令行工具
node-svn-ultimate从SVN拉取远程模板
ora显示loading动画
3.2.创建bin目录
在bin目录下创建work-cli.js文件&＃xff0c;文件顶部注解是告诉系统用node去执行&＃xff0c;添加init命令
#! /usr/bin/env nodeconst program &＃61; require(&＃39;commander&＃39;);// 定义当前版本
// 定义使用方法
// 定义四个指令
program.version(require(&＃39;../package.json&＃39;).version).usage(&＃39; [options]&＃39;)// 后期扩展支持根据配置的地址初始化模板// .command("init-config", "generate a new project from a config template").command(&＃39;init&＃39;, &＃39;generate a new project from git&＃39;).command(&＃39;create&＃39;, &＃39;create a new business page from git&＃39;);
// 解析命令行参数
program.parse(process.argv);
创建完改文件我们通过node ./bin/work-cli 执行&＃xff0c;控制台会出现如下结果
如果每次都输入node ./bin/work-cli 就比较麻烦了&＃xff0c;我们重新在package.json中增加启动命令
{"name": "work-cli","version": "0.0.1","description": "work cli","main": "index.js","bin": {"work": "bin/work-cli.js"},...
}
然后通过npm link挂载到全局&＃xff0c;这样就只需要输入work就可以运行了
我们可以通过npm list -g --depth 0查看全局的依赖&＃xff0c;然后通过npm unlink卸载挂载到全局的命令&＃xff0c;卸载的命令名就是当前工程下package.json中的name
4.编写command命令
4.1.init命令
当执行work init时&＃xff0c;node会自动从bin目录下查找work-cli-xxx.js的文件
work-cli-init.js代码如下&＃xff0c;处理argv的参数以及分发到对应的仓库文件拉取模板&＃xff0c;然后删除从仓库拉取下来之后目录中的.git/.svn文件&＃xff0c;让目录与拉取仓库解绑&＃xff0c;目录文件不展示仓库状态图标
#!/usr/bin/env nodeconst program &＃61; require(&＃39;commander&＃39;);
const chalk &＃61; require(&＃39;chalk&＃39;);
const ora &＃61; require(&＃39;ora&＃39;);
const initSvn &＃61; require(&＃39;./work-cli-svn&＃39;);
const initGit &＃61; require(&＃39;./work-cli-git&＃39;);
const deleteFolder &＃61; require(&＃39;./common/deleteFile&＃39;);program.usage(&＃39; &＃39;);
program.parse(process.argv);// 当没有输入参数的时候提示
if (program.args.length <1) return program.help();const projectName &＃61; program.args[0];
// 校验下项目名称
if (!projectName) {console.log(chalk.red(&＃39;n Project should not be empty! n&＃39;));return;
}const warehouseType &＃61; program.args[1];
// 校验仓库类型
if (!warehouseType) {console.log(chalk.red(&＃39;n Warehouse should not be empty! n&＃39;));return;
}console.log(chalk.white(&＃39;n Start generating... n&＃39;));
// 加载图标
const spinner &＃61; ora(&＃39;Downloading...&＃39;);
spinner.start();const callBack &＃61; (err, fileName) &＃61;> {spinner.succeed();if (err) {console.log(chalk.red(&＃39;n Copy project template exception&＃39;));console.log(&＃96;n ${err}&＃96;);} else {try {deleteFolder(&＃39;./&＃39; &＃43; projectName, fileName);} catch (error) {console.log(chalk.yellow(&＃39;n Delete &＃39; &＃43; fileName &＃43; &＃39; folder exception, but does not affect operation&＃39;));}console.log(chalk.green(&＃39;n Generation completed!&＃39;));console.log(&＃39;n To get started&＃39;);console.log(&＃96;n cd ${projectName} n&＃96;);}
};if (warehouseType &＃61;&＃61;&＃61; &＃39;svn&＃39;) {initSvn(projectName).then((err) &＃61;> {callBack(err, &＃39;.svn&＃39;);});
} else {const repository &＃61; &＃39;direct:https://github.com/huhaiqing106/react-temlpate.git&＃39;;initGit(repository, projectName).then((err) &＃61;> {callBack(err, &＃39;.git&＃39;);});
}
Git仓库拉取的时候repository需要特别注意下地址一定要带上direct:&＃xff0c;GIT地址从这里copy&＃xff0c;然后加上direct:
4.1.1.work-cli-git文件
这个文件很简单&＃xff0c;就是从GIT拉取模板
const download &＃61; require(&＃39;download-git-repo&＃39;);module.exports &＃61; (repository, projectName) &＃61;> {return new Promise((resolve, reject) &＃61;> {download(repository, projectName, { clone: true }, function (err) {resolve(err);});});
};
4.1.2.work-cli-svn文件
const svnUltiMate &＃61; require(&＃39;node-svn-ultimate&＃39;);module.exports &＃61; (projectName) &＃61;> {const svnUrl &＃61; &＃39;xxxx&＃39;;return new Promise((resolve, reject) &＃61;> {svnUltiMate.commands.checkout(svnUrl, projectName, { username: &＃39;xxx&＃39;, password: &＃39;xxx&＃39; }, function (err) {resolve(err);});});
};
这个文件是从SVN仓库拉取模板&＃xff0c;这里需要注意几点&＃xff0c;因为node是通过命令行去拉取的模板&＃xff0c;所以我们的环境需要支持svn命令&＃xff0c;参考如下&＃xff1a;
step 1
安装SVN命令行工具&＃xff0c;附下载地址
下载Apache Subversion command line tools&＃xff0c;这是一个可以在cmd下使用的命令行工具&＃xff0c;解压后把里面bin目录这个路径添加到环境变量的path&＃xff0c;这样在cmd下就可以使用了&＃xff0c;和Linux下使用svn的习惯一样了。
step 2
配置环境变量
4.1.3.deleteFile文件
这个文件主要是递归删除从仓库拉取下来的模板中的隐藏文件.svn/.git
const fs &＃61; require(&＃39;fs&＃39;);/*** 寻找.svn文件&＃xff0c;删除svn关联** &＃64;param {*} pathStr*/
function deleteFolder(pathStr, fileName) {let files &＃61; [];if (fs.existsSync(pathStr)) {files &＃61; fs.readdirSync(pathStr, &＃39;utf8&＃39;);files.forEach(function (file, index) {let curPath &＃61; pathStr &＃43; &＃39;/&＃39; &＃43; file;// 匹配特定SVN文件夹&＃xff0c;然后移除if (new RegExp(&＃96;^${fileName}$&＃96;).test(file)) {deleteFile(curPath);}});}
}/*** 删除svn文件夹与文件** &＃64;param {*} pathStr*/
function deleteFile(pathStr) {let files &＃61; [];if (fs.existsSync(pathStr)) {files &＃61; fs.readdirSync(pathStr, &＃39;utf8&＃39;);files.forEach(function (file, index) {let curPath &＃61; pathStr &＃43; &＃39;/&＃39; &＃43; file;if (fs.statSync(curPath).isDirectory()) {deleteFile(curPath);} else {fs.unlinkSync(curPath);}});fs.rmdirSync(pathStr);}
}module.exports &＃61; deleteFolder;
4.2.create命令
create命令也一样&＃xff0c;只是拉取的模板不同而已&＃xff0c;所以直接上代码
const program &＃61; require(&＃39;commander&＃39;);
const chalk &＃61; require(&＃39;chalk&＃39;);
const initGit &＃61; require(&＃39;./work-cli-git&＃39;);
const ora &＃61; require(&＃39;ora&＃39;);
const deleteFolder &＃61; require(&＃39;./common/deleteFile&＃39;);program.usage(&＃39;&＃39;);
program.parse(program.args);if (program.args.length <1) {return program.help();
}const pageName &＃61; program.args[0];if (!pageName) {console.log(chalk.red(&＃39;n PageName should not be empty n&＃39;));return;
}console.log(chalk.white(&＃39;n Start generating... n&＃39;));
// 加载图标
const spinner &＃61; ora(&＃39;Downloading...&＃39;);
spinner.start();const repository &＃61; &＃39;direct:https://github.com/huhaiqing106/business-page-template.git&＃39;;
initGit(repository, pageName).then((err) &＃61;> {spinner.succeed();if (err) {console.log(chalk.red(&＃39;n Copy business page template exception&＃39;));console.log(&＃96;n ${err}&＃96;);} else {try {deleteFolder(&＃39;./&＃39; &＃43; pageName, &＃39;.git&＃39;);} catch (error) {console.log(chalk.yellow(&＃39;n Delete &＃39; &＃43; fileName &＃43; &＃39; folder exception, but does not affect operation&＃39;));}console.log(chalk.green(&＃39;n Generation completed!&＃39;));}
});
5.发布npm
至此一个简易的脚手架已经搭建好了&＃xff0c;本地我们可以通过npm link挂载到全局测试&＃xff0c;测试通过之后&＃xff0c;我们在发布到npm私服&＃xff0c;然后通过npm install xxx -g将依赖安装到全局之后&＃xff0c;就可以开心的玩耍了
6.参考文献
SVN安装教程&＃xff1a;https://www.jianshu.com/p/725e49003e44
SVN命令行工具&＃xff1a; http://www.visualsvn.com/downloads/
参考资料&＃xff1a;https://juejin.cn/post/6844903807919325192#heading-10
第一次记录写文章&＃xff0c;文笔有限&＃xff0c;多多包涵&＃xff0c;ヾ(´ー&＃96;)&＃xff89;゛谢谢♪
京公网安备 11010802041100号