利用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 相关文章推荐
javascript 自定义事件初探
Aug 21 Javascript
jQuery UI-Draggable 参数集合
Jan 10 Javascript
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 Javascript
jQuery easyui datagrid动态查询数据实例讲解
Feb 26 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 Javascript
详解Vue组件之间的数据通信实例
Jun 17 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 Javascript
详解VSCode配置启动Vue项目
May 14 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 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提示undefined index的几种解决方法
2012/05/21 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
深入理解PHP 数组之count 函数
2016/06/13 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
2013/12/10 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
JavaScript实现的类字典插入或更新方法实例
2015/07/10 Javascript
javascript学习总结之js使用技巧
2015/09/02 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
2016/07/09 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
javascript 操作cookies详解及实例
2017/02/22 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
[03:21]【TI9纪实】Old Boys
2019/08/23 DOTA
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
Python中的浮点数原理与运算分析
2017/10/12 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
浅谈pyqt5中信号与槽的认识
2019/02/17 Python
python如何删除文件中重复的字段
2019/07/16 Python
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
台湾良兴购物网:EcLife
2019/12/01 全球购物
中级会计大学生职业生涯规划书
2014/09/16 职场文书
专项资金申请报告
2015/05/15 职场文书
初中思想品德教学反思
2016/02/24 职场文书
担保书怎么写 ?
2019/04/22 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技