当前位置: 首页 > 后端技术 > Node.js

如何实现高级版脚手架(Vue-cliv2.9学习篇)

时间:2023-04-03 10:05:30 Node.js

前言在上一篇博客中,我介绍了一些关于Node脚手架的基础知识。这篇博客是基于上一篇。脚手架开发中遇到的问题,如:终端样式、交互问题、文件处理问题,通过分析Vue-cli2.9.2源码,解决相关问题。如果没有看过之前的博客,或者没有了解过Node.js脚手架的同学,推荐阅读之前的文章:如何实现一个简单的Node.js脚手架。如何自定义终端样式文终端chalk是一个日志样式库,可以调整终端上日志的样式。以下代码:constchalk=require('chalk');console.log(chalk.red('你好世界'));转换为特定样式:通过文档可以知道chalk可以支持文字颜色和背景颜色。如何在终端ora中实现加载图可以实现在终端加载的效果,与用户交互后即可使用。从官网上的例子,我们可以实现如下效果:如何在终端与用户交互在终端与用户交互,获取用户输入是一个很常见的需求。Inquirer是一个库,可以让我们通过终端与用户进行交互,比如下面这个例子:varinquirer=require('inquirer');inquirer.prompt([{type:'confirm',name:'OK',message:'你还好吗?',默认值:false}]).then(answers=>{console.log(answers);});结果内容是:文件相关有目录结构的模板文件怎么下载方便?最常见的File模板下载都是先上传到CDN,再以特定的格式下载到页面。但是,如果你想更优雅的下载文件,你可以通过download-git-repo下载你在Git上准备好的模板,这样在下载过程中可以保证文件目录和顺序,比如之前的它自己创建和检测文件夹要容易得多。如何处理下载的文件当你提供的模板不仅仅是一个纯文件,而是可以通过一定的参数编译得到不同的目标文件时,你可以通过metalsmith对文件进行操作。它是一个用来构建静态网站的类库,也可以用来处理文件。您可以通过编写一些处理回调函数来处理您的模板文件。如何编译模板语言如果你想要现成的模板编译工具,可以使用现成的,比如Handlebars。他可以像后端模板语言一样直接处理类HTML文件,我们可以看官方的例子。

{{title}}

{{body}}
以上模板,编译时填写title和body两个字段,就可以得到一个完整的HTML片段。在Vue-cli中,使用了模板引擎合并库consolidate.js,通过该库的render方法编写metalsmith的处理函数,从而在渲染过程中对模板进行处理。具体代码如下:exports.handlebars.render=function(str,options,fn){returnpromisify(fn,function(fn){varengine=requires.handlebars||(requires.handlebars=require('handlebars'));try{for(varpartialinoptions.partials){engine.registerPartial(partial,options.partials[partial]);}for(varhelperinoptions.helpers){engine.registerHelper(helper,options.helpers[helper]);}vartmpl=cache(options)||cache(options,engine.compile(str,options));fn(null,tmpl(options));}catch(err){fn(err);}});};因此,他可以使用安装好的handlebar模板引擎来注册helpers来进行模板处理。总结通过对Vue-cli源码的简单学习,我们可以发现对于日常与用户交互、文件处理和编译的需求,有更好的解决方案。当然,上面提供的解决方案不是唯一的,仅供大家参考和快速实施。您还可以使用其他一些方法来实现相同的功能。如有任何问题,欢迎交流。