本文主要给大家介绍了关于利用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) 写文件,接受三个参数,文件路径,向文件中写的数据,回掉。代码实施
流程图

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的应用所在绝对路径,第二个参数为当前脚本所在的绝对路径,之后所输入的参数以空格分隔,如输入









