簡易腳手架實(shí)現(xiàn)

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

//四種模板。對應(yīng)我git倉庫四個(gè)倉庫地址

consttempIndex={

react:'reactTemplate',//react模板

vue:'vueTemplate',//vue模板

h5:'h5Template',//h5模板

dva:'dvaTemplate',//dva模板

};

letprojectName;//存儲目錄

lettemplateName;//模板名稱

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

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;

//允許目標(biāo)項(xiàng)目名和要復(fù)制的模板類型名順序顛倒

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)

//沒有輸入任何參數(shù)，報(bào)語法錯(cuò)誤，并打印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{

//檢測項(xiàng)目文件夾是否已存在，若存在，拋出錯(cuò)誤

constres=awaitfs.pathExists(file);

if(res){

if(forceDel){

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

awaitfs.remove(file);

downloadByGit(renameFile,tempName);

}else{

//拋出錯(cuò)誤，并提示可以使用-f參數(shù)來強(qiáng)制刪除已存在的項(xiàng)目

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

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

}

return;

}

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

downloadByGit(renameFile,tempName);

}catch(err){

console.error(red(err));

}

}關(guān)于chalk，這是一款顏色標(biāo)記插件，將要打印的文字用不同的顏色標(biāo)記出來，如下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;

}

//定義回調(diào)；

callback&&callback();

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

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