当前位置: 首页 > 后端技术 > Node.js

使用nodejs自动生成前端项目组件

时间:2023-04-03 18:39:51 Node.js

脚本编写背景写这个??小脚本的初衷是项目本身加一个组件太麻烦。比如我要构建一个登录组件,那么我需要手动到IDE中创建Index.js(组件导出文件)、login.js(业务文件)、login.html、login.less这四个文件.因为每个组件都有一些输出代码,复制上一个组件的行确实很烦人,所以我写了一个小脚本来自动完成这些功能。PS:本脚本运行环境为nodeV7以上,当前时间为2017/07,稳定版仍为V6,node最新版本为V8.1.3(当前版本),如需运行,请升级节点版本到当前版本。命令行输入预期效果:nodesetlogin在components文件夹下自动生成4个文件,并填写index.js和login.js文件的public内容。如果输入多层文件如:nodesetlogin/foo,它会先检查components文件夹下是否存在login,如果不存在则先创建login文件夹,再创建foo组件。这个脚本主要是利用nodejs的fs模块来完成需求。fs模块fs模块用于读写系统文件和目录。本次使用的fs模块主要功能为:fs.existsSync(path)检测文件夹是否存在,同步API,只接受一个路径参数,当前版本异步弃用。fs.mkdir(path,callback)创建一个文件夹,异步的,需要两个参数,path和callback。fs.readFileSync(path)读取文件并接受一个参数,即文件路径。fs.writeFile(path,data,callback)写一个文件,接受三个参数,文件路径,写入文件的数据,和回调。代码实现流程图asyncfunctioncreatCpt(){try{awaitexists();//检测文件夹awaitreadFile();//读取模板内容awaitwriteFile(awaitreadFile());//写组件}catch(err){console.error(err);}}获取命令行参数以nodesetlogin为例,如果要创建login文件夹,首先要在命令行中获取login。在nodejs中,使用命令process.argv返回一个数组获取命令行参数。第一个参数是nodejs.exe应用程序的绝对路径,第二个参数是当前脚本的绝对路径,后面输入的参数之间用空格隔开,比如输入nodesetaaa,get:检查文件夹是否存在letexists=function(){returnnewPromise((res)=>{(asyncfunction(){for(letaofpath){fs.existsSync(basepath+a)?basepath=`${basepath}${a}/`:awaitmkdir(a);}res(basepath);})()})}判断是否有文件夹,有则重启拼接路径继续检查,不存在则文件夹生成。创建文件夹节点集foo/barletmkdir=function(a){returnnewPromise((res,rej)=>{fs.mkdir(basepath+a,(err)=>{if(err)rej(err);basepath=`${basepath}${a}/`res(basepath);});})}文件夹创建成功后,会重新组合路径,方便继续查找。读取模板内容letreads=[`${basepath}cptTemp/index.js`,`${basepath}cptTemp/cptTemp.js`];//要读取的文件letreadFile=function(){returnnewPromise((res)=>{for(letaofreads){lettext=fs.readFileSync(a).toString();text=text.replace(/time/g,moment().format('YYYY/MM/DD')).replace(/temp/g,name);file.push(text)}res(file);})}每个生成的文件都需要一个创建时间,和作者,包括文件的Output,以及类等structures,这些比较常见,写在模板里,然后读出来,替换里面的关键字,比如时间,元件名等生成文件和写入内容建立要生成的文件和要生成的文件提前阅读。如:letwrites=[`${name}.js`,`${name}.html`,`${name}.less`,`index.js`];letwriteFile=function(file){returnnewPromise((res,rej)=>{(asyncfunction(){for(letaofwrites){awaitfs.writeFile(`${basepath}${a}`,a==writes[3]?file[0]:a==writes[0]?file[1]:'',(err)=>{if(err)rej(err)})}res('succ');})()})}目前只写了两个需要读取的模板。生成文件后,会填充模板中的内容,综上所述,一个自动生成前端项目组件的小脚本就完成了。当然,它还可以继续扩展。比如这些组件其实需要注入到组件管理的js中。这些可以用脚本来完成。这篇文章是关于That'sallfornow。项目地址:https://github.com/jiwenjiang...