簡易腳手架實現

簡易腳手架實現大致整理一下即將要實現的功能：1.命令的解析這個可以借助commander實現；2.文件操作，復制粘貼，增加刪除，文件內容的新增，替換；可以借助fs-extra實現；3.模板文件，就以自己對前端工程化粗淺的認識，寫一個模板項目；4.申請一個npm賬號，這個不算實現的功能，算附屬工作；流程如下：實現代碼命令解析：

//四種模板。對應我git倉庫四個倉庫地址

consttempIndex={

react:'reactTemplate',//react模板

vue:'vueTemplate',//vue模板

h5:'h5Template',//h5模板

dva:'dvaTemplate',//dva模板

};

letprojectName;//存儲目錄

lettemplateName;//模板名稱

letinputIndex;//除了拷貝模板，還支持自定義模板路徑下載，但感覺有點多此一舉

constprogram=newcommander.Command(packageJ)

.version('v'+packageJson.version,'-v,--version')

.arguments('<templateName>')

.arguments('<projectName>')

.option('-f,--force','forcedeletetheexistdirector')

.option('-d,--directly','copythenotspecifiedtemplate')

.alias('cp')

.description('create-doddlereactmyProject')

.action(function(index,name){

inputIndex=index;

//允許目標項目名和要復制的模板類型名順序顛倒

if(tempIndex[index]||tempIndex[name]){

if(tempIndex[index]){

templateName=tempIndex[index];

projectName=name;

}else{

templateName=tempIndex[name];

projectName=index;

}

}

if(program.directly){

templateName=index;

}

});

program.parse(process.argv)

//沒有輸入任何參數，報語法錯誤，并打印help

if(program.args.length===0){

console.log(chalk.red('syntaxerror'));

program.help()

}

if(templateName){

excute(templateName,projectName,program.force);

}else{

console.log(`thetemplate${inputIndex}youwantdownloaddonotexist`);

}

文件拷貝：asyncfunctioncreate(temp,project,force=false){

tempName=temp;

projectName=project;

forceDel=force;

constfile=currentPath+projectName;

try{

//檢測項目文件夾是否已存在，若存在，拋出錯誤

constres=awaitfs.pathExists(file);

if(res){

if(forceDel){

console.log(green('forceremovetheexistdirectory'));

awaitfs.remove(file);

downloadByGit(renameFile,tempName);

}else{

//拋出錯誤，并提示可以使用-f參數來強制刪除已存在的項目

console.log(chalk.red('Error,Inthisdirectory,theprojectnamealreadyexsits!'));

console.log(chalk.green('youcanuseoption-ftoforcedeletethedirectory!'));

}

return;

}

//若不存在，直接從git下載

downloadByGit(renameFile,tempName);

}catch(err){

console.error(red(err));

}

}關于chalk，這是一款顏色標記插件，將要打印的文字用不同的顏色標記出來，如下git文件下載：functiondownloadByGit(callback,template){

console.log(green('startdownload'));

console.log(`git@:closertb/${template}.git`);

constresult=spawn(

'git',

['clone',`git@:closertb/${template}.git`],

{stdio:'inherit'}

);

consterror=result.error;

if(error){

console.log(red(error));

return;

}

//定義回調；

callback&&callback();

}主要就這三段代碼，就實現了命令的解析，和從git源端拷貝模板到本地。創(chuàng)建可執(zhí)行命令稍微對前端工程化了解的就知道，對于項目，想創(chuàng)建npmrunstart或npmrundev這樣的可執(zhí)行命令，只需要在package.json的scripts進行定義。而想要創(chuàng)建vueinitwebpackmyapp或dvainitmyapp這樣的命令又怎樣做呢？

第一步：在你項目的package.json中填上一個bin屬性，表明它是可執(zhí)行的,并配置好可執(zhí)行命令和入口文件第二步：在你的入口文件（我這里是根目錄的index.js）首行加上一段代碼：#!/usr/bin/envnode，告訴操作系統(tǒng)執(zhí)行這個腳本的時候，調用/usr/bin下的node解釋器；第三步：登錄你的npm賬號，運行npmpublish發(fā)布你的npm包，一個簡易的腳手架就寫好了。最后其實不論vue-cli，還是create