本文主要给大家介绍了关于利用node.js实现自动生成前端项目组件的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍：
脚本编写背景
写这个小脚本的初衷是，项目本身添加一个组件太繁琐了，比如我想要去建立一个login的组件，那么我需要手动去IDE中，创建index.js(组件出口文件)，login.js(业务文件)，login.html，login.less这四个文件。因为每个组件都有一些输出的代码，还要把之前组件的那几行拷贝过来，这种作业真的烦，于是乎写了一个小脚本去自动完成这些功能。
PS:本脚本运行环境是nodeV7以上，当前时间2017/07，stable版本还是V6，最新的node版本为V8.1.3（LTS版本），如要运行，请升级node版本为LTS版本。
预期效果
在命令行输入：node set login
在conponents文件夹下面自动生成4个文件，并填写index.js,login.js的文件公共内容。
如果输入多层文件如： node set login/foo
则会先检测conponents文件夹下是否存在login，如不存在，先创建login文件夹，然后创建foo的组件。本脚本主要使用nodejs的fs模块来完成需求。
fs模块
fs模块用于对系统文件及目录进行读写操作，本次主要用到的fs模块的功能有：fs.existsSync(path)检测文件夹是否存在，一个同步的API，只接受一个路径参数，当前版本异步的废弃了。fs.mkdir(path,callback)创建文件夹，异步，两个必填参数，路径和回掉。fs.readFileSync(path)读取文件，接受一个参数，文件路径。fs.writeFile(path,data,callback)写文件，接受三个参数，文件路径，向文件中写的数据，回掉。
代码实施
流程图
获取命令行参数
以node set login为例，想要创建一个login文件夹，首先先要获取命令行当中的login。在nodejs当中，获取命令行参数使用process.argv这条命令返回一个数组，第一个参数为nodejs.exe的应用所在绝对路径，第二个参数为当前脚本所在的绝对路径，之后所输入的参数以空格分隔，如输入node set aaa,得到：
检测文件夹是否存在
判断是否存在文件夹，如果存在，重新拼接路径继续检查，如不存在则生成文件夹。
创建文件夹
node set foo/bar
创建文件夹成功后，重新拼接路径，以便于继续查找。
读取模板内容
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等结构，这些都是比较公用的，把他们写在模板当中，然后读取出来，替换其中的关键词，如时间，组件名等。
生成文件并写入内容
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');
})()
})
}
目前只写了2个要读取的模板，在生成文件之后，会将模板中的内容填充进去。
总结
以上就完成了一个自动生成前端项目组件的小脚本了，当然，还可以继续扩充，比如这些组件其实还需要再到，组件管理的那个js中去注入，这些都可以用脚本完成，本文就到这里为止了。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。
项目地址：...
原文链接：https://www.f2er.com/nodejs/37914.html