如何开发一个Node脚手架进阶版（Vue-cli学习篇）

前言

在以前一篇博客介绍了关于Node脚手架的一些基础的知识，这篇博客是在以前的基础上针对在Node中开发脚手架中遇到的问题，如：

• 终端样式、交互问题
• 文件处理问题

经过对Vue-cli 2.9.2的源码进行分析，解决相关问题。

若是没有看过以前一篇博客的，或者对Node.js的脚手架没有了解过的同窗，推荐先看上一篇：如何实现一个简单的Node.js脚手架。

正文

终端

怎么自定义终端的样式

chalk是一个日志的样式库，能够在终端上面调整日志的样式。

如下的代码：

const chalk = require('chalk');

console.log(chalk.red('hello world'));
复制代码

转换为具体样式为：

经过说明文档，咱们能够知道，chalk能够支持文字颜色和背景颜色。

怎么实现终端中的Loading图

ora能够在终端实现Loading的效果，能够在与用户进行交互后使用。

从官网的实例来看，咱们能够实现如下的效果：

怎么在终端中和用户进行交互

在终端中和用户进行交互，获取用户输入是一个很常见的需求。

Inquirer这个库可以经过终端让咱们和用户进行一些交互，好比下面的例子：

var inquirer = require('inquirer');
inquirer.prompt([{type: 'confirm', name: 'OK', message: 'Are you OK?', default: false}]).then(answers => {
    console.log(answers);
});
复制代码

获得的结果内容为：

文件相关

怎么可以方便下载有目录结构的模板文件

最多见的文件模板下载，都是经过将文件上传到CDN中，而后再经过某个特定的格式下载到页面上。

可是，若是你想要经过比较优雅的方式来进行文件下载，能够经过download-git-repo来下载你再Git上面已经准备好的模板，这样就可以在下载的过程当中保证文件目录和顺序，比以前本身建立和检测文件夹会简便不少。

怎么对下载的文件进行处理

当你提供的模板不单单是一个纯粹的文件，而是能够经过某些参数进行编译，获得不一样的目标文件时，你能够经过metalsmith来对文件进行操做。

它是一个用来构建静态网站的类库，也可以用来对文件进行处理。

你能够经过编写一些处理的回调函数来对你的模板文件进行处理。

怎么编译模板语言

若是你想要一套现成的模板编译工具，能够使用现成的如Handlebars。

他可以像后端模板语言同样，直接针对类HTML文件进行处理，咱们能够看下官方的例子。

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>
复制代码

针对上述模板，在编译时填入title和body两个字段，便可获得完整的HTML片断。

在Vue-cli中，使用了模板引擎合并库consolidate.js,经过这个库的render方法来编写metalsmith的处理函数，从而在渲染的过程当中对模板进行处理，具体代码以下：

exports.handlebars.render = function(str, options, fn) {
  return promisify(fn, function(fn) {
    var engine = requires.handlebars || (requires.handlebars = require('handlebars'));
    try {
      for (var partial in options.partials) {
        engine.registerPartial(partial, options.partials[partial]);
      }
      for (var helper in options.helpers) {
        engine.registerHelper(helper, options.helpers[helper]);
      }
      var tmpl = cache(options) || cache(options, engine.compile(str, options));
      fn(null, tmpl(options));
    } catch (err) {
      fn(err);
    }
  });
};
复制代码

所以，他能够利用已经安装好的handlebar模板引擎来注册helper，从而进行模板的处理。

总结

经过对Vue-cli源码的简单学习，咱们能够发如今平常中须要处理的与用户交互、文件处理编译等需求也有了一个比较好的解决方案。

固然，上面提供的方案不是惟一的，仅提供给你们进行一个参考和快速实现。你们也能够经过一些其余的方法来实现相同的功能。

有任何问题欢迎进行交流。