利用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各种复制代码收集
Sep 20 Javascript
jquery应该如何来设置改变按钮input的onclick事件
Dec 10 Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 Javascript
使用ajax+jqtransform实现动态加载select
Dec 01 Javascript
javascript工厂方式定义对象
Dec 26 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
详解AngularJs中$sce与$sceDelegate上下文转义服务
Sep 21 Javascript
JS排序之快速排序详解
Apr 08 Javascript
AngularJs用户输入动态模板XSS攻击示例详解
Apr 21 Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
May 10 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
关于crontab的使用详解
2013/06/24 PHP
php实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
jquery 实现窗口的最大化不论什么情况
2013/09/03 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
JavaScript中的substr()方法使用详解
2015/06/06 Javascript
在JavaScript中处理字符串之link()方法的使用
2015/06/08 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
Python中input和raw_input的一点区别
2014/10/21 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
浅谈python numpy中nonzero()的用法
2018/04/02 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
python的常见矩阵运算(小结)
2019/08/07 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
自荐信的禁忌和要点
2013/10/15 职场文书
政法大学毕业生自荐信范文
2014/01/01 职场文书
优秀部门获奖感言
2014/02/14 职场文书
创建文明学校实施方案
2014/03/11 职场文书
公务员检讨书
2014/11/01 职场文书
大国崛起日本观后感
2015/06/02 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS
如何自己动手写SQL执行引擎
2021/06/02 MySQL