利用node.js实现自动生成前端项目组件的方法详解


Posted in Javascript onJuly 12, 2017

本文主要给大家介绍了关于利用node.js实现自动生成前端项目组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍:

脚本编写背景

利用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.js实现自动生成前端项目组件的方法详解

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,得到:

利用node.js实现自动生成前端项目组件的方法详解

检测文件夹是否存在

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);
  })()
 })
}

判断是否存在文件夹,如果存在,重新拼接路径继续检查,如不存在则生成文件夹。

创建文件夹

node set foo/bar

利用node.js实现自动生成前端项目组件的方法详解

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);
 })
}

利用node.js实现自动生成前端项目组件的方法详解

每个生成好的文件都需要一个创建的时间,及作者,包括文件的输出,以及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');
  })()
 })
}

利用node.js实现自动生成前端项目组件的方法详解

目前只写了2个要读取的模板,在生成文件之后,会将模板中的内容填充进去。

总结

以上就完成了一个自动生成前端项目组件的小脚本了,当然,还可以继续扩充,比如这些组件其实还需要再到,组件管理的那个js中去注入,这些都可以用脚本完成,本文就到这里为止了。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

项目地址:https://github.com/jiwenjiang...

本地下载地址:http://xiazai.3water.com/201707/yuanma/angularSeed(3water.com).rar

Javascript 相关文章推荐
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
JavaScript Event学习第十一章 按键的检测
Feb 10 Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 Javascript
Js点击弹出下拉菜单效果实例
Aug 12 Javascript
jquery的map与get方法详解
Nov 04 Javascript
js取float型小数点后两位数的方法
Jan 18 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
vue.js中$set与数组更新方法
Mar 08 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
vue cli安装使用less的教程详解
Jul 12 Javascript
AngularJS实现select的ng-options功能示例
Jul 12 #Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 #Javascript
实例详解JavaScript中setTimeout函数的执行顺序
Jul 12 #Javascript
详解Node项目部署到云服务器上
Jul 12 #Javascript
angular.js中解决跨域问题的三种方式
Jul 12 #Javascript
JavaScript+HTML5实现的日期比较功能示例
Jul 12 #Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
Jul 12 #Javascript
You might like
php下HTTP Response中的Chunked编码实现方法
2008/11/19 PHP
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
js实现按一下删除键删除整个单词附demo
2014/09/05 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
基于Vue实现拖拽功能
2020/07/29 Javascript
Windows下Node爬虫神器Puppeteer安装记
2019/01/09 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
python Django框架实现自定义表单提交
2016/03/25 Python
Python中functools模块的常用函数解析
2016/06/30 Python
python中csv文件的若干读写方法小结
2018/07/04 Python
基于Python的PIL库学习详解
2019/05/10 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
Python3获取cookie常用三种方案
2020/10/05 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
德国2018年度最佳在线药房:Bodfeld Apotheke
2019/11/04 全球购物
英国第一的滑雪服装和装备零售商:Snow+Rock
2020/02/01 全球购物
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
班主任工作年限证明
2014/01/12 职场文书
优秀应届毕业生推荐信
2014/02/18 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
助理政工师申报材料
2014/06/03 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python