我想写一个前端开发工具（三）:优化！从vue-cli学了几招

　　

　　我从过年开始写自己的前端工具 coodev，目前已经写出一个基本的架子，大多数预想的功能都能跑通，还剩一些需要解决的问题也都已经列出来了。本来这一周打算解决对不同后端模板的前后端渲染支持的问题。但是看了一下代码，当初很多功能写的还是有很大优化空间的。我打算先停下脚步，多看一些优秀的开源框架的源码，然后优化整理一下我的前端工具。

　　在选择阅读源码时，我首先想到的就是vue-cli的源码。毕竟我最初的灵感就是来源于vue-cli。闲话少说，我们先下载一份vue-cli，打开源码先看package.json熟悉整体的代码结构，不过这里我建议直接阅读/bin 文件夹下的几个文件：vue、 vue-init、 vue-build、 vue-list

　　引用的比较多的比如vue-init就在一开始引用了一大堆的文件

　　

 #!/usr/bin/env node
 
 var download = require('download-git-repo')
 var program = require('commander')
 var exists = require('fs').existsSync
 var path = require('path')
 var ora = require('ora')
 var home = require('user-home')
 var tildify = require('tildify')
 var chalk = require('chalk')
 var inquirer = require('inquirer')
 var logger = require('../lib/logger')
 var generate = require('../lib/generate')
 var checkVersion = require('../lib/check-version')
 var warnings = require('../lib/warnings')

　　它们都是干嘛用的，我们调一些比较重要的说一下。

一、优化参数处理

　　先看vue：

 #!/usr/bin/env node
 
 require('commander')
   .version(require('../package').version)
   .usage('<command> [options]')
   .command('init', 'generate a new project from a template')
   .command('list', 'list available official templates')
   .command('build', 'prototype a new project')
   .parse(process.argv)

　　可以看出这个文件主要是对 ‘commander’的使用。那么‘commander’这个npm包又是什么呢？字面意思‘指挥官’，我们在 https://www.npmjs.com/ 网站上可以搜一下，会有一些简单的文档用例。其实‘commander’就是命令控制器，vue-cli用这个库来管理用户输入的命令，来完成在终端上用户命令行的交互。

　　回到vue-cli能看到一个很大的链试调用，完成了一些列的任务，我们要先了解这些api，就能明白这个文件在干什么了。关于 ‘commander’的API，可以看npm上的官方例子，后续我也会写一篇有关于使用 ‘commander’的文章。我这里先介绍几个我用到的：

　　我原先是通过一个map定义命令，用到的地方require一下，通过 process.argv.splice(2) 拿到参数。后来改用‘commander’，就比较省心直接注册参数：

　　

 var program = require('commander');
 
 program
     .version(require('./package').version)
     .option('-i, --init', '初始化项目文件夹')
     .option('-d, --dev', '以开发模式启动coodev 即时编译 不压缩')
     .option('-b, --build', '以生产模式启动coodev 编译一次 压缩')
     .option('-s, --server', '本地server调试')
     .option('-p, --publish', '提交到发布仓库')
     .parse(process.argv);
 
 /** init */
 if (program.init) {
     require('./src/tasks/task-init.js').render();
 }
 
 /** dev */
 if (program.dev) {
     require('./src/tasks/task-dev.js').render();
 }
 
 /** build */
 if (program.build) {
     require('./src/tasks/task-build.js').render();
 }
 
 /** start */
 if (program.start) {
     require('./src/tasks/task-server.js').render();
 }
 
 /** publish */
 if (program.publish) {
     require('./src/tasks/task-publish.js').render();
 }
 
 program.on('--help', function () {
   console.log('  Examples:')
   console.log()
   console.log(chalk.gray('    # create a new project with an official template'))
   console.log('    $ coodev --init')
   console.log()
   console.log(chalk.gray('    # develop project'))
   console.log('    $ coodev --dev')
   console.log()
   console.log(chalk.gray('    # start local server'))
   console.log('    $ coodev --start')
   console.log()
 })；

　　其中version和我原来的方式差不多，版本号就直接引用package.json，自己觉得预设的命令就用option定义（简写，全名，描述），简写和全名是调用的时候用的，描述是在输入命令'--help'的时候会自动抓取的。最后的‘on’，就像是jquery中的事件绑定一样，给命令追加额外的处理逻辑。

　　这里只是一些常用的，我后期还要加上一些交互性质的参数处理，比如引导用户配置工程等等，虽然原来自己写的也能满足目前的需求，但为了后期的功能，还是先改成‘commander’好一些。

二、按需拉取github上的模板

　　这事我最想学习的功能。用过vue-cli的朋友都知道有一个这样的命令 $ vue init webpack-simple yourproject-name 的初始化命令，他会作为几个脚手架给我们初始化模板，那么模板都放哪了？如果放在vue-cli里面，随着后期维护，就会越来越大，这不就毁了吗。我看了一下官方的描述说模板放在了另一个git仓库里，我也在github里找到了。我起初的时候为了独立维护模板，也是这样做的放在了别处，每次coodev发布时，用脚本同步过来，但我的方式虽然快，但是也就是现在模板数少还可以。因此我打算按需要拉取模板。

　　这个功能无疑是在vue-init文件里面，我发现有一个 var download = require('download-git-repo') ，在npm上查了一下，描述是这样“从节点下载并提取一个git存储库”，那么应该就是它了。

　　我的模板放在了github上的另一个仓库，https://github.com/grARM/coodev-temp-normal。现在想拉到coodev中只需要调用如下代码：

 /** get code from github */
 var loadNormalTmpl = function(cb){
     download('grARM/coodev-temp-normal', proPath, function (err) {
         if(err){
             console.log('err', err);
         }
         cb && cb(err);
     });
 }

　　其中proPath是我的工程目录，这样就比我之前的递归文件拷贝高端了不少。

三、交互式命令

　　既然可以从别处拉模板，那么我的coodev一下子就可以精简很多，我以后可以拥有一大堆模板，都放在github上，我想拉哪一个，就拉哪一个。我还需要给用户提供交互式的命令。在vue-init中也是有这个例子的。 var inquirer = require('inquirer')

　　'inquirer'是一个提供交互式命令的npm包，地址： https://www.npmjs.com/package/inquirer。这个库在Github的examples文件夹里有详细的例子。每一个问答都会被封装到answers里。

 inquirer.prompt([{
         type: 'list',
         message: 'which template do you need:',
         name: 'template',
         choices: ['normal', 'wap', 'h5']
     }]).then(function (answers) {
         console.log(answers)
             done();
     })        

　　如图：  

总结：　　

　　就这样，我就在vue-cli中学习了3招：命令管理、按需拉取模板、交互式命令。

　　接下来就是处理不同的主流后端模板引擎的支持了。