利用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 相关文章推荐
学习ExtJS TextField常用方法
Oct 07 Javascript
js loading加载效果实现代码
Nov 24 Javascript
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
使用Bootrap和Vue实现仿百度搜索功能
Oct 26 Javascript
vue中$refs的用法及作用详解
Apr 24 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 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
PHP4中实现动态代理
2006/10/09 PHP
php var_export与var_dump 输出的不同
2013/08/09 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
js实现转动骰子模型
2019/10/24 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
ES6中Promise的使用方法实例总结
2020/02/18 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
pymssql ntext字段调用问题解决方法
2008/12/17 Python
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
python实现网站的模拟登录
2016/01/04 Python
八大排序算法的Python实现
2021/01/28 Python
python实时分析日志的一个小脚本分享
2017/05/07 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
Jupyter Notebook的连接密码 token查询方式
2020/04/21 Python
python中使用np.delete()的实例方法
2021/02/01 Python
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
仓库管理专业个人自我评价范文
2013/11/11 职场文书
实习单位接收函模板
2014/01/10 职场文书
教师政风行风自查自纠报告
2014/10/21 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
个人自荐书范文
2015/03/09 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
JS如何实现基于websocket的多端桥接平台
2021/05/14 Javascript
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python