利用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 相关文章推荐
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 Javascript
微信小程序request出现400的问题解决办法
May 23 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
vue用递归组件写树形控件的实例代码
Jul 19 Javascript
菊花转动的jquery加载动画效果
Aug 19 jQuery
详解可以用在VS Code中的正则表达式小技巧
May 14 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 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中的 == 运算符进行字符串比较
2006/11/26 PHP
php异常处理使用示例
2014/02/25 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
jquery图片轮播特效代码分享
2020/04/20 Javascript
Jquery ajax请求导出Excel表格的实现代码
2016/06/08 Javascript
javascript笔记之匿名函数和闭包
2017/02/06 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
在nginx上部署vue项目(history模式)的方法
2017/12/28 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
自主招生自荐书
2013/11/29 职场文书
交通安全寄语大全
2014/04/08 职场文书
银行求职信
2014/05/31 职场文书
锅炉工岗位职责
2015/02/13 职场文书
2015年团支书工作总结
2015/04/03 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
关于 Python json中load和loads区别
2021/11/07 Python
Appium中scroll和drag_and_drop根据元素位置滑动
2022/02/15 Python