大佬教程收集整理的这篇文章主要介绍了使用nodejs自动生成前端项目组件,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
写这个小脚本的初衷是,项目本身添加一个组件太繁琐了,比如我想要去建立一个login的组件,那么我需要手动去IDE中,创建index.js(组件出口文件),login.js(业务文件),login.html,login.less这四个文件。因为每个组件都有一些输出的代码,还要把之前组件的那几行拷贝过来,这种作业真的烦,于是乎写了一个小脚本去自动完成这些功能。
PS:本脚本运行环境是nodeV7以上,当前时间2017/07,stable版本还是V6,最新的node版本为V8.1.3(current版本),如要运行,请升级node版本为current版本。
在命令行输入:node set login
在conponents文件夹下面自动生成4个文件,并填写index.js,login.js的文件公共内容。
如果输入多层文件如: node set login/foo
则会先检测conponents文件夹下是否存在login,如不存在,先创建login文件夹,然后创建foo的组件。本脚本主要使用Nodejs的fs模块来完成需求。
fs模块用于对系统文件及目录进行读写操作,本次主要用到的fs模块的功能有:
fs.existsSync(path) 检测文件夹是否存在,一个同步的API,只接受一个路径参数,当前版本异步的废弃了。
fs.writeFile(path,data,callBACk) 写文件,接受三个参数,文件路径,向文件中写的数据,回掉。
async function creatCpt() { try { await exists(); // 检测文件夹 await readFile(); // 读取模板内容 await writeFile(await readFile()); //写入组件 } catch (err) { console.error(err); } }
以node set login为例,想要创建一个login文件夹,首先先要获取命令行当中的login。在Nodejs当中,获取命令行参数使用process.argv
这条命令返回一个数组,第一个参数为nodejs.exe的应用所在绝对路径,第二个参数为当前脚本所在的绝对路径,之后所输入的参数以空格分隔,如输入node set aaa,得到:
301_12@
let exists = function () { return new Promise((res) => { (async function () { for (let a of path) { fs.existsSync(basepath + a) ? basepath = `${Basepath}${a}/` : await mkdir(a); } res(basepath); })() }) }
判断是否存在文件夹,如果存在,重新拼接路径继续检查,如不存在则生成文件夹。
let mkdir = function (a) { return new Promise((res,rej) => { fs.mkdir(basepath + a,(err) => { if (err) rej(err); basepath = `${Basepath}${a}/` res(basepath); }); }) }
let reads = [`${Basepath}cptTemp/index.js`,`${Basepath}cptTemp/cptTemp.js`];//要读取的文件 let readFile = function () { return new Promise((res) => { for (let a of reads) { let text = fs.readFileSync(a).toString(); text = text.replace(/time/g,moment().format('YYYY/MM/DD')) .replace(/temp/g,Name); file.push(text) } res(filE); }) }
每个生成好的文件都需要一个创建的时间,及作者,包括文件的输出,以及class等结构,这些都是比较公用的,把他们写在模板当中,然后读取出来,替换其中的关键词,如时间,组件名等。
let writes = [`${name}.js`,`${name}.html`,`${name}.less`,`index.js`]; let writeFile = function (filE) { return new Promise((res,rej) => { (async function () { for (let a of writes) { await fs.writeFile(`${Basepath}${a}`,a == writes[3] ? file[0] : a == writes[0] ? file[1] : '',(err) => { if (err) rej(err) }) } res('succ'); })() }) }
以上就完成了一个自动生成前端项目组件的小脚本了,当然,还可以继续扩充,比如这些组件其实还需要再到,组件管理的那个js中去注入,这些都可以用脚本完成,本文就到这里为止了。
以上是大佬教程为你收集整理的使用nodejs自动生成前端项目组件全部内容,希望文章能够帮你解决使用nodejs自动生成前端项目组件所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。