前言相信在我们每天遇到的项目中，无论是前端网站还是后台管理系统，都会有类似功能的页面。我们在开发类似功能的页面时，为了提高效率，一般会使用我们的CV方式。但是当我们的CV流传久了，你是不是觉得这样的开发方式有点乏味？我们是否可以通过代码生成代码来进一步提高我们的效率呢？下面通过一个例子来探讨下如何通过node生成我们需要的前端代码。示例假设我们在做一个后台管理系统（react），页面文件目录结构如下图所示：页面文件夹下有两个文件夹：home和network，分别代表不同的模块。稍微观察一下，不难发现两个模块下的文件目录结构是一样的，有些文件名也是一样的。面对这种情况，有些人，包括我一开始开发项目的人，可能会觉得directCV简单快捷。不过这一次先不着急，先看看js文件中需要的初始代码：结构基本一样，只是模块和组件的名称不同而已。在上面的例子中，我们可以复制和粘贴相似的文件夹和文件，但是我们也必须重命名不同的模块和组件。说页面文件少还好，但是当页面多的时候，比如有七八个模块，几十页的时候，我们进行这些无意义的重复操作会不会很不舒服呢？那么我们能不能想办法尽量避免这些操作呢？TyronnLu：解决方案？把球传给詹姆斯，当然！只是在开玩笑。首先要仔细分析pages下的文件。home文件夹和网络文件夹的文件目录结构相同，但部分文件夹下的文件名和内容可能不同。这有点类似于组件的复用，那我们是不是可以利用类似组件复用的思路，写一个统一的模板，然后给它传递不同的参数，生成不同的组件。基本思路是这样的：以配置参数的形式配置我们的文件夹名、文件名、文件模板参数，然后一键生成我们的文件夹、文件、文件内容。节点API的基本思路确定了，但是我们如何自动生成文件夹和文件呢？相信后端小伙伴们都不陌生，但是前端小伙伴们在业务上可能对这方面的了解还比较少。不过只要你熟悉node，这一切都不是问题。这里我们可以使用node的fs（文件系统）API来帮助我们做这些事情。创建目录在node中创建文件（目录）文件夹有两种方式：第一种（异步）：fs.mkdir(path[,options],callback)参数path-文件路径。options参数可以是：recursive-是否递归创建目录，默认为false。mode-设置目录权限，默认为0777。callback-回调函数，无参数。基本用法fs.mkdir('/pages/home',(err)=>{if(err)throwerr;});第二（同步）：fs.mkdirSync(path[,options])基本用法fs.mkdirSync('/页面/主页');创建文件创建文件有两种方式：第一种（异步）：fs.writeFile(file,data[,options],callback)参数文件-文件名或文件描述符。data-要写入文件的数据，可以是String（字符串）或Buffer（缓冲区）对象。options-参数是一个包含{encoding,mode,flag}的对象。默认编码为utf8，mode为0666，flag为'w'callback-回调函数，回调函数只包含错误信息参数（err），写入失败时返回。基本用法fs.writeFile('file.txt','Hello~',(err)=>{if(err)throwerr;console.log('文件已保存');});第二种（同步）：fs.writeFileSync(file,data[,options])基本用法fs.writeFileSync('file.txt','Hello~');我们已经了解了生成目录和文件的基本知识，接下来就是可以编写代码了。当然，你的电脑上要有node环境。一般来说，每个人都应该配置节点环境。如果实在没有，可以上网搜索一下。创建项目文件，首先构建我们的项目：主要关注红框中的文件夹和文件夹。index.js文件是我们的主程序，文件夹（目录）和文件生成的程序逻辑都在里面，文件夹（目录）和最后运行文件页面为我们生成的文件模板有两个文件data.js是我们的配置文件，包括文件夹（目录）和文件名，还有文件模板的参数。Template.js就是我们各种文件的模板。这里先说一下，因为我们假设是在react项目下，其他文件基本都是react相关的。红框中的代码逻辑没有和react耦合，同样适用于其他框架。生成文件夹（目录）回到最初的例子，我们需要在pages文件夹下生成如下格式的文件夹和文件：这里需要注意的是无论是fs.mkdir()还是fs.mkdirSync()，它们都是在现有文件夹上创建的。比如我们要在pages下创建一个list文件夹，就不能直接这样写：index.jsconstfs=require("fs");fs.mkdirSync('./page/home/list');//报错是因为这里的home文件夹不存在，所以list文件夹不会创建成功。正确的应该这样写：constfs=require("fs");fs.mkdirSync('./page/home');fs.mkdirSync('./page/home/list');当然，我们不能直接这样写，我们可以递归创建目录：index.jsconstfs=require("fs");constpath=require("path");functionmkdirsSync(dirname){if(fs.existsSync(dirname)){//这里是检测文件目录是否已经存在returntrue;}else{if(mkdirsSync(path.dirname(dirname))){fs.mkdirSync(dirname);returnconsole.log(`创建目录成功-${dirname}`);}}}mkdirsSync('./page/home/list');接下来是配置文件：data.jsexports.data=[{folder:'home',},{folder:'home/list',},{folder:'home/images'},{folder:'home/form',},{folder:'network',},{folder:'network/list',},{folder:'network/images'},{folder:'network/form',}]导入配置文件并遍历生成文件：index.jsconstfs=require("fs");constpath=require("path");//引入配置文件constprofileData=require("./template/data");//递归创建目录同步方法functionmkdirsSync(dirname){if(fs.existsSync(dirname)){returntrue;}else{if(mkdirsSync(path.dirname(dirname))){fs.mkdirSync(dirname);returnconsole.log(`创建目录成功-${dirname}`);}}}//遍历配置文件，调用创建目录方法profileData.data.forEach((item)=>{if(item.folder){mkdirsSync(`./pages/${item.folder}`)}})为了生成文件，我们生成了目录。生成文件时，我们主要关注文件名和文件内容。首先，我们需要定义文件的模板。这里我们主要需要使用模板字符串（``）。因为有些文件内容有不同的类名，所以在定义模板的时候，可以为这种类型的模板定义一个参数，如下所示className:template.jsexports.page=function(className){'react';exportclass${className}extendsReact.Component{constructor(props){super(props);this.state={}}componentDidMount(){}render(){return(
)}}`}exports.api=`constAPI="localhost://8080/my-api";`exports.route=`import*asReactfrom'react';exportconstroute=[];`模板定义完成后，继续在配置文件data.js中添加相应的配置项，如下图file和className:data.jsexports.data=[{folder:'home',file:'api.js'},{folder:'home',file:'route.js'},{folder:'home/list',文件:'home.js',className:'Home'},{folder:'home/images'},{folder:'home/form',file:'modal.js',className:'homeModal'},{文件夹：'网络'，file:'api.js',},{folder:'network',file:'route.js'},{folder:'network/list',file:'network.js',className:'Network'},{folder:'network/images'},{folder:'network/form',file:'modal.js',className:'networkModal'}]最后要做的就是写文件生成代码：index.jsconstfs=require("fs");constpath=require("path");//引入配置文件constprofileData=require("./template/data")//引入文件模板lettemplate=require("./template/template");letpage=template.page;letapi=template.api;letroute=template.route;//遍历创建文件profileData.data.forEach((item)=>{if(item.file){//创建API文件if(item.file.indexOf("api")!=-1){fs.writeFile(`./pages/${item.folder}/${item.file}`,api,function(err){if(err){returnconsole.log('创建失败',err);}console.log(`创建文件成功！-${item.file}`);})}//创建路由文件if(item.file.indexOf("route")!=-1){fs.writeFile(`./pages/${item.folder}/${item.file}`,route,function(err){if(err){returnconsole.log('创建失败',err);}console.log(`文件创建成功！-${item.file}`);})}//创建主页if(item.className){fs.writeFile(`./pages/${item.folder}/${item.file}`,page(item.className),function(err){if(err){returnconsole.log('创建失败',err);}console.log(`创建文件成功！-${item.file}`);})}}})最后我们可以直接运行index.js了:我们可以看到控制台打印的信息是我们已经成功创建了文件夹（目录）和文件，最后查看pages文件夹下的目录和文件：我们可以将得到的目录和文件与初始时的文件进行对比instance，发现我们已经成功生成了想要的目录和文件~大功告成~完整的代码和例子我已经放在我的GitHub上了，大家可以根据自己的实际需要修改完善自己的。开发效率参考https://www.runoob.com/nodejs...http://nodejs.cn/api/fs.html最后，上述文件配置和模板调用自动生成重复代码的方法文件。这种方法可以在一定程度上减少我们复制粘贴的重复操作，提高我们的工作效率。这种方法也是我开发中的一种尝试，还有很多不足之处。如果有朋友在工作中为了提高开发效率有过类似的尝试，欢迎分享给大家~如果文章有错误，也欢迎大家指出~