利用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学习笔记(一) 在html中使用javascript
Jun 18 Javascript
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
canvas时钟效果
Feb 16 Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
使用重写url机制实现验证码换一张功能
Aug 01 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
一百行JS代码实现一个校验工具
Apr 30 Javascript
Vue.js实现大转盘抽奖总结及实现思路
Oct 09 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
PHP substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
PHP最常用的正则表达式
2017/02/13 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
Yii2框架控制器、路由、Url生成操作示例
2019/05/27 PHP
jQuery 解析xml文件
2009/08/09 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
基于JavaScript实现在新的tab页打开url
2016/08/04 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
Python开发编码规范
2006/09/08 Python
Python多线程编程(六):可重入锁RLock
2015/04/05 Python
Python+微信接口实现运维报警
2016/08/27 Python
速记Python布尔值
2017/11/09 Python
python爬虫之自动登录与验证码识别
2020/06/15 Python
详解python解压压缩包的五种方法
2019/07/05 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
python数组循环处理方法
2019/08/26 Python
Python爬取豆瓣视频信息代码实例
2019/11/16 Python
django框架中间件原理与用法详解
2019/12/10 Python
Python函数基本使用原理详解
2020/03/19 Python
Ibatis如何使用动态表名
2015/07/12 面试题
银行存款证明样本
2014/01/17 职场文书
2014年留守儿童工作总结
2014/12/10 职场文书
航班延误投诉信
2015/07/02 职场文书
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电