利用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 相关文章推荐
jQuery图片的展开和收缩实现代码
Apr 16 Javascript
javascript解决IE6下hover问题的方法
Jul 28 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
Oct 26 Javascript
基于vue cli 通过命令行传参实现多环境配置
Jul 12 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
Koa 中的错误处理解析
Apr 09 Javascript
vue.js购物车添加商品组件的方法
Sep 17 Javascript
详解JavaScript 作用域
Jul 14 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定界符
2014/06/19 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
php 问卷调查结果统计
2015/10/08 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
表格单元格交错着色实现思路及代码
2013/04/01 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
使用js复制链接中的部分文字的方法
2015/07/30 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
基于JavaScript实现的希尔排序算法分析
2017/04/14 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
浅谈JS函数节流防抖
2017/10/18 Javascript
基于dataset的使用和图片延时加载的实现方法
2017/12/11 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
python http基本验证方法
2018/12/26 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
快速解决pymongo操作mongodb的时区问题
2020/12/05 Python
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
利用Node实现HTML5离线存储的方法
2020/10/16 HTML / CSS
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
Python使用openpyxl复制整张sheet
2021/03/24 Python
焊接专业毕业生求职信
2013/10/01 职场文书
大学三年的自我评价
2013/12/25 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
保险公司2016开门红口号集锦
2015/12/24 职场文书
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS