简易脚手架
-
2023年3月19日发(作者：数据专线)svn拉取项⽬代码_前端项⽬搭建部署全流程（四）：脚⼿架与
业务模块构建
1.前⾔
继上⼀篇⽂章之后⼀个简单的React项⽬模板已经搭建好了，这篇⽂章主要写⼀下简易脚⼿架以及业务模块的⽣成命令⾏，以往我们使⽤较
多的是vue-cli、create-react-app等开源脚⼿架，但是这些脚⼿架不⼀定符合我们当前使⽤的环境(⽐如公司的通⽤脚⼿架)，这个时候我们
就需要针对使⽤环境搭建⼀个脚⼿架，来提升整体的开发效率。
为什么要使⽤脚⼿架？简单描述⼏点：
1.减少重复的⼯作，不需要在内部通过ctrl+c、ctrl+v的⽅式复制项⽬结构
2.可以保持整个⼯程的项⽬结构以及编码规范保持⼀致等
......
2.⽀持的功能
这个脚⼿架写的⽐较简单，主要实现了两个功能：
it根据可选仓库拉取远程模板，初始化⼀个项⽬
eate根据GIT仓库拉取业务模块模板，⽣成业务⽊块项⽬结构(这个模板没有实现功能，可以从这些⽅⾯去⼊⼿，⽐如包含⼀个
标砖的查询界⾯或者内置⼀些通⽤的⽅法增、删、查、改等，可以快速构建⼀个简单的查询界⾯)
3.初始化项⽬
npminit-y
3.1.安装依赖
yarnaddchalkcommanderdownload-git-repoinquirernode-svn-ultimateora--dev
chalk修改控制台输出内容样式
commander命令⾏⼯具
download-git-repo从GIT拉取远程模板
inquirer交互式命令⾏⼯具
node-svn-ultimate从SVN拉取远程模板
ora显⽰loading动画
3.2.创建bin⽬录
在bin⽬录下创建⽂件，⽂件顶部注解是告诉系统⽤node去执⾏，添加init命令
#!/usr/bin/envnode
constprogram=require('commander');
//定义当前版本
//定义使⽤⽅法
//定义四个指令
program
.version(require('../').version)
.usage('[options]')
//后期扩展⽀持根据配置的地址初始化模板
//mand("init-config","generateanewprojectfromaconfigtemplate")
mand('init','generateanewprojectfromgit')
mand('create','createanewbusinesspagefromgit');
//解析命令⾏参数
();
创建完改⽂件我们通过node./bin/work-cli执⾏，控制台会出现如下结果
如果每次都输⼊node./bin/work-cli就⽐较⿇烦了，我们重新在中增加启动命令
{
"name":"work-cli",
"version":"0.0.1",
"description":"workcli",
"main":"",
"bin":{
"work":"bin/"
},
...
}
然后通过npmlink挂载到全局，这样就只需要输⼊work就可以运⾏了
我们可以通过npmlist-g--depth0查看全局的依赖，然后通过npmunlink卸载挂载到全局的命令，卸载的命令名就是当前⼯程
下中的name
4.编写command命令
命令
当执⾏workinit时，node会⾃动从bin⽬录下查找的⽂件
workinit
代码如下，处理argv的参数以及分发到对应的仓库⽂件拉取模板，然后删除从仓库拉取下来之后⽬录中的.git/.svn⽂件，让⽬
录与拉取仓库解绑，⽬录⽂件不展⽰仓库状态图标
#!/usr/bin/envnode
constprogram=require('commander');
constchalk=require('chalk');
constora=require('ora');
constinitSvn=require('./work-cli-svn');
constinitGit=require('./work-cli-git');
constdeleteFolder=require('./common/deleteFile');
('');
();
//当没有输⼊参数的时候提⽰
if(<1)();
constprojectName=[0];
//校验下项⽬名称
if(!projectName){
(('nProjectshouldnotbeempty!n'));
return;
}
constwarehouseType=[1];
//校验仓库类型
if(!warehouseType){
(('nWarehouseshouldnotbeempty!n'));
return;
}
(('nStartgenerating...n'));
//加载图标
constspinner=ora('Downloading...');
();
constcallBack=(err,fileName)=>{
d();
if(err){
(('nCopyprojecttemplateexception'));
(`n${err}`);
}else{
try{
deleteFolder('./'+projectName,fileName);
}catch(error){
(('nDelete'+fileName+'folderexception,butdoesnotaffectoperation'));
}
(('nGenerationcompleted!'));
('nTogetstarted');
(`ncd${projectName}n`);
}
};
if(warehouseType==='svn'){
initSvn(projectName).then((err)=>{
callBack(err,'.svn');
});
}else{
constrepository='direct:/huhaiqing106/';
initGit(repository,projectName).then((err)=>{
callBack(err,'.git');
});
}
Git仓库拉取的时候repository需要特别注意下地址⼀定要带上direct:，GIT地址从这⾥copy，然后加上direct:
-cli-git⽂件
这个⽂件很简单，就是从GIT拉取模板
constdownload=require('download-git-repo');
s=(repository,projectName)=>{
returnnewPromise((resolve,reject)=>{
download(repository,projectName,{clone:true},function(err){
resolve(err);
});
});
};
-cli-svn⽂件
constsvnUltiMate=require('node-svn-ultimate');
s=(projectName)=>{
constsvnUrl='xxxx';
returnnewPromise((resolve,reject)=>{
ut(svnUrl,projectName,{username:'xxx',password:'xxx'},function(err){
resolve(err);
});
});
};
这个⽂件是从SVN仓库拉取模板，这⾥需要注意⼏点，因为node是通过命令⾏去拉取的模板，所以我们的环境需要⽀持svn命令，参考如
下：
step1
安装SVN命令⾏⼯具，附下载地址
下载ApacheSubversioncommandlinetools，这是⼀个可以在cmd下使⽤的命令⾏⼯具，解压后把⾥⾯bin⽬录这个路径添加到环境变
量的path，这样在cmd下就可以使⽤了，和Linux下使⽤svn的习惯⼀样了。
step2
配置环境变量
安装⽬录Apache-Subversionbin
File⽂件
这个⽂件主要是递归删除从仓库拉取下来的模板中的隐藏⽂件.svn/.git
constfs=require('fs');
/**
*寻找.svn⽂件，删除svn关联
*
*@param{*}pathStr
*/
functiondeleteFolder(pathStr,fileName){
letfiles=[];
if(Sync(pathStr)){
files=rSync(pathStr,'utf8');
h(function(file,index){
letcurPath=pathStr+'/'+file;
//匹配特定SVN⽂件夹，然后移除
if(newRegExp(`^${fileName}$`).test(file)){
deleteFile(curPath);
}
});
}
}
/**
*删除svn⽂件夹与⽂件
*
*@param{*}pathStr
*/
functiondeleteFile(pathStr){
letfiles=[];
if(Sync(pathStr)){
files=rSync(pathStr,'utf8');
h(function(file,index){
letcurPath=pathStr+'/'+file;
if(nc(curPath).isDirectory()){
deleteFile(curPath);
}else{
Sync(curPath);
}
});
ync(pathStr);
}
}
s=deleteFolder;
命令
create命令也⼀样，只是拉取的模板不同⽽已，所以直接上代码
constprogram=require('commander');
constchalk=require('chalk');
constinitGit=require('./work-cli-git');
constora=require('ora');
constdeleteFolder=require('./common/deleteFile');
('');
();
if(<1){
();
}
constpageName=[0];
if(!pageName){
(('nPageNameshouldnotbeemptyn'));
return;
}
(('nStartgenerating...n'));
//加载图标
constspinner=ora('Downloading...');
();
constrepository='direct:/huhaiqing106/';
initGit(repository,pageName).then((err)=>{
d();
if(err){
(('nCopybusinesspagetemplateexception'));
(`n${err}`);
}else{
try{
deleteFolder('./'+pageName,'.git');
}catch(error){
(('nDelete'+fileName+'folderexception,butdoesnotaffectoperation'));
}
(('nGenerationcompleted!'));
}
});
5.发布npm
⾄此⼀个简易的脚⼿架已经搭建好了，本地我们可以通过npmlink挂载到全局测试，测试通过之后，我们在发布到npm私服，然后通过npm
installxxx-g将依赖安装到全局之后，就可以开⼼的玩耍了
6.资料⽂件
第⼀次记录写⽂章，⽂笔有限，多多包涵，ヾ(´ー`)