详细说明使用node.js自动生成前端项目组件的方法

时间：2021-09-04 来源：互联网编辑：宝哥软件园浏览：次

本文主要介绍使用node.js自动生成前端项目组件的相关内容，并分享给大家参考学习。下面的话就不多说了，我们来看看详细的介绍：

脚本背景

编写这个脚本的初衷是向项目本身添加一个组件太麻烦了。例如，如果我想构建一个登录组件，我需要手动去IDE创建四个文件：index.js(组件导出文件)、login.js(业务文件)、login.html和login.less因为每个组件都有一些输出代码，而且之前组件的行都要被复制，这种工作真的很烦人，所以我写了一个小脚本来自动完成这些功能。

PS:该脚本运行环境在nodeV7以上，当前时间为2017/07，稳定版本为V6，最新节点版本为V8.1.3(LTS版)。如果您想运行它，请将节点版本升级到LTS版本。

预期/期望/预期的效果

在命令行中，输入：节点集登录

在conponents文件夹下自动生成四个文件，填写index.js和login.js的文件公共内容。

如果输入多层文件，如节点集登录/foo，

然后先检查组件文件夹中是否有login，如果没有，先创建login文件夹，然后创建foo的组件。这个脚本主要使用nodejs的fs模块来满足需求。

Fs模块fs模块用于读写系统文件和目录。本次主要使用的fs模块功能如下：

FS。ExistSync(路径)检测文件夹是否存在。同步API只接受一个路径参数，当前版本异步丢弃。Fs.mkdir(路径，回调)创建一个文件夹，异步，两个必需的参数，路径和回退。Fs.readFileSync(路径)读取文件并接受一个参数，文件路径。FS。writefile(路径、数据、回调)写入文件，接受三个参数，文件路径，将数据写入文件，然后返回。代码实现

流程图

async函数creatCpt(){ try { await exists()；//检查等待readFile()的文件夹；//读取模板内容await write file(await readFile())；//write component } catch(err){ console . error(err)；}}获取命令行参数

以节点集登录为例，如果要创建登录文件夹，必须先在命令行中获取登录。在nodejs中，获取命令行参数并使用命令process.argv返回一个数组。第一个参数是nodejs.exe应用程序所在的绝对路径，第二个参数是当前脚本所在的绝对路径。之后，输入参数用空格隔开。例如，输入节点集aaa以获取：

检查文件夹是否存在

let exists=function(){ return new Promise((RES)={(async function(){ for(let of path){ fs . existssync(base path a)}？base path=` $ { base path } $ { a }/` : await mkdir(a)；} RES(base path)；}) ()})}判断是否有文件夹，如果有，重新拼接路径继续检查，如果没有，生成文件夹。

创建文件夹

节点集foo/bar

让mkdir=函数(a) {返回新的Promise((res，rej)={ fs.mkdir(basepath a)，(err)={ if(err)rej(err)；base path=` $ { base path } $ { a }/` RES(base path)；});})}成功创建文件夹后，重新拼接路径以便继续搜索。

读取模板内容

let reads=[`$ { base path } cptTemp/index . js `，` $ { base path } cptTemp/cptTemp . js `]；//要读取的文件let read file=function(){ return new promise((RES)={ for(let of reads){ let text=fs。readfilesync (a)。tostring()；text=text.replace(/time/g，moment()。格式('年/月/日')。替换(/temp/g，name)；file . push(text)} RES(file)；})}

每个生成的文件都需要一个创建时间、作者，包括文件的输出、类和其他常见的结构。将它们写在模板中，然后读出并替换关键词，如时间、组件名称等。

生成文件并写入内容

预先建立要生成的文件和要读取的文件。例如：

let writes=[`${name}.js `，` ${name}.html `，` ${name}.less `，` index . js `]；let write file=function(file){ return new Promise((RES，rej)={(async function(){ for(let of writes)} { await fs . write file(` $ { base path } $ { a } `，a==writes[3]？文件[0] : a==写入[0]？文件[1] : ' '，(err)={ if(err)rej(err)})} RES(' suc ')；})()})}