详解如何使用Node.js编写命令工具——以vue-cli为例


Posted in Javascript onJune 29, 2017

vue-cli全局安装之后,提供了vue命令和vue init、vue list、vue build三个子命令,通过命令可以搭建基于vue.js的脚手架项目。本文简单介绍一下这些命令是如何实现的。

vue-cli的项目目录

如下图,由之前文章介绍,npm安装过程中,可以利用package.json中bin字段的配置,将bin目录下的命令文件软连到全局命令。也就是说在/usr/local/bin下生成了四个软连命令:vue、vue-build、vue-list、vue-init。

详解如何使用Node.js编写命令工具——以vue-cli为例

详解如何使用Node.js编写命令工具——以vue-cli为例 

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.js来实现。commander的主要方法:

(1)parse:用于解析process.argv,将process.argv.slice(2)赋值给program.args;

(2)command:创建子命令,子命令的使用方法是command <subcommand> [options],实际调用的命令是command-subcommand,如使用命令行执行vue list,其实是在执行vue-list全局命令;

(3)options:主要设置命令的参数,同时提供参数对应的说明文档,默认提供的option是--help。

vue-init子命令的实现

vue-init的主要功能是拉取指定git目录下的项目模板文件(官方或自制)到指定目录下,用法如下

$ vue init <template-name> <project-name>

这里仍需要解析process.argv,所以在vue-init中又引入了commander.js,生成了一个program

program

  .usage('<template-name> [project-name]')

  .option('--offline', 'use cached template')

 

/**

 * Help.

 */

 

function help () {

  program.parse(process.argv)

  if (program.args.length < 1) return program.help()

}

help()

接下来就是要实现拉取模板文件,经处理后,放置到产出目录下,具体如何实现的,接下来会有专门的文章介绍vue-cli命令的实现原理,敬请期待!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
Jul 31 Javascript
javascript:void(0)是什么意思示例介绍
Nov 17 Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
JS实现设置ff与ie元素绝对位置的方法
Mar 08 Javascript
原生js实现节日时间倒计时功能
Jan 18 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 Javascript
Node.js API详解之 zlib模块用法分析
May 19 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 #Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 #Javascript
详解vue数据渲染出现闪烁问题
Jun 29 #Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 #Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 #Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 #jQuery
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 #Javascript
You might like
中英文字符串翻转函数
2008/12/09 PHP
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
2019/04/22 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
python的urllib模块显示下载进度示例
2014/01/17 Python
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
Python的缺点和劣势分析
2019/11/19 Python
django使用graphql的实例
2020/09/02 Python
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
铭万公司.net面试题笔试题
2014/07/20 面试题
表扬稿表扬信的格式及范文
2019/06/24 职场文书
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL
Python中itertools库的四个函数介绍
2022/04/06 Python