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

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。

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命令的实现原理，敬请期待！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解Node.js如何开发命令行工具

    前言 Node 给前端开发带来了很大的改变,促进了前端开发的自动化,我们可以简化开发工作,然后利用各种工具包生成生产环境.如运行sass src/sass/main.scss dist/css/main.css即可编译 Sass 文件. 在实际的开发过程中,我们可能会有自己的特定需求, 那么我们得学会如何创建一个Node命令行工具. hello world 老规矩第一个程序为hello world.在工程中新建bin目录,在该目录下创建名为helper的文件,具体内容如下: #!/usr/bin

  • Node.js 使用命令行工具检查更新

    Node.js 使用命令行工具检查更新

    随着 Node.js 的"走红",使用 Node.js 开发命令行工具越来越简单.一个成熟的命令行工具应该从一开始就要考虑好之后的版本更新如何"优雅"的告知用户.最好的方法当然是当用户在终端执行命令时,将相关信息提示给用户. 这篇文章将给出一个易用.高效.可定制的方法.源码在这里: GITHUB ,欢迎大家顺手点赞.接下来我将讲解其实现思路. 使用 我们先简单看看这个 npm 包的使用方法: const updater = require('pkg-updater'

  • 利用node.js制作命令行工具方法教程（一）

    前言 之前使用过一些全局安装的NPM包,安装完之后,可以通过其提供的命令,完成一些任务.比如Fis3,可以通过fis3 server start 开启fis的静态文件服务,通过fis3 release开启文件编译与发布:还有vue-cli,可以通过vue init webpack my-project来初始化vue+webpack的项目基础配置.最近有一个需求,需要写一个类似vue-cli的NPM包,通过命令行操作实现项目初始配置,所以就查看了相关资料,学习了一下如何使用node来生成自己的命令

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

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

    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. vue命令的源码

  • 详解如何使用Node.js实现热重载页面

    前言 前不久我结合browser-sync+gulp+gulp-nodemon实现了一款生产环境热更新(我之前理解有点偏差,应该定义为热更新,不是热重载)的项目脚手架,那么,今天我们将使用Node.js实现一个热重载页面. 那么,我今天就总结一下吧,以防止大家也跟我一样. 热重载 所谓热重载就是页面每次改动,不需要手动去刷新,可自动刷新. 热更新 浏览器的无刷新更新,允许在运行时替换,添加,删除各种模块,而无需进行完全刷新重新加载整个页面. 目的:加快开发速度,所以只适用于开发环境下使用. 思路

  • 详解Wondows下Node.js使用MongoDB的环境配置

    详解Wondows下Node.js使用MongoDB的环境配置

    为了保存网站的用户数据和业务数据,通常需要一个数据库.MongoDB和Node.js特别般配,因为MongoDB是基于文档的非关系型数据库,文档是按BSON(JSON的轻量化二进制格式)存储的,增删改查等管理数据库的命令和JavaScript语法很像.如果你在Node.js里访问MongoDB的数据,会有我们是一家人的感觉,特别亲切. 我也准备使用MongoDB来作为我的数据库. MongoDB使用集合(collection)和文档(document)来描述和存储数据,collection就相当

  • 详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据

    最近使用了protobuf进行数据交互,发送在node.js接收前端的二进制数据出现了数据错误等问题.后来发现思路上面的问题,在req.on('data',()=>{})事件中的处理不适当才引发数据错乱.借此发 我先直接贴正确接收二进制数据代码 const server = http.createServer((req, res) => { if(req.method==='OPTIONS'){ res.setHeader("Access-Control-Allow-Origin&q

  • 详解两个Node.js进程是如何通信

    目录 前言 不同电脑上的两个 Node.js 进程间通信 使用 TCP 套接字 使用 HTTP 协议 同一台电脑上两个 Node.js 进程间通信 使用内置 IPC 通道 使用自定义管道 总结 前言 两个 Node.js 进程之间如何进行通信呢?这里要分两种场景: 不同电脑上的两个 Node.js 进程间通信 同一台电脑上两个 Node.js 进程间通信 对于第一种场景,通常使用 TCP 或 HTTP 进行通信,而对于第二种场景,又分为两种子场景: Node.js 进程和自己创建的 Node.j

  • 详解如何使用node.js的开发框架express创建一个web应用

    搭建环境 1.安装Express 按键:Windows+R=>输入cmd,打开命令行,输入 npm install -g express@3 我们需要用全局模式安装Express,因为只有这样,我们才能在命令行中使用它 注意:这里我只选用Express 3.x版本,要是你对Express3x版本熟悉了的话,你只需看一下Migrating from 3.x to 4.x 的文档即可过渡到Express 4.x 2.新建一个工程 继续打开命令行,输入 express -e murenziwei 注意

  • 详解axios在node.js中的post使用

    前言: 最近因为做的东西需要用到网络请求库,之前接触过的只有request,很强大好用.但是这个项目中需要用到Promise,我又不想重新封装,于是选择了另一款库axios. 在node中,axios的get请求加上原生支持的Promise语法使用起来很方便,很丝滑,但是后面碰到了一个需求,就是要向另一个服务器post数据,并且这个数据是以form-data的形式post过去的,这时,问题就出现了. 问题: 当我想在node中使用axios以post的方式发送一张图片给某个server时,最先我

  • 详解一些适用于Node.js的命名约定

    序言 There are only two hard things in Computer Science: cache invalidation and naming things. -- Phil Karlton 我乔鲁诺·乔巴拿有一个梦想,便是要成为程序员巨星.但如果你看过我写的代码,便知道我还远远够不上"巨星"二字.我的代码中有许多不一致的命名: 常量的命名时而是全大写的(如WAIT_CONFIRM),时而是全小写的: 某个项目大部分命名用的是camel case(如TaskC

  • 详解Node.js一行命令上传本地文件到服务器

    详解Node.js一行命令上传本地文件到服务器

    现在存在的问题 每次打包完, 都要打开 FileZilla 一顿拖拽然后才能上传代码, 那就立马撸一个自动化脚本就完事了 publish-sftp Github 传送门(顺便来骗个Star) 以后一行命令上传本地文件到服务器啦 publish-sftp -c // 完事 安全性 项目组已经跑了大半年, 没出过幺蛾子, 可放心使用 实现 基于 ssh2-sftp-client 快速上手 install sudo npm i publish-sftp -g sudo npm link publish

  • Node.js编写CLI的实例详解

    Node.js编写CLI的实例详解

    Why Node.js? 常用的用来编写CLI的语言有 python, ruby, perl, Node.js等等. 为什么选取Node.js作为CLI的语言编写工具呢?有三个理由: 对Javascript语言更加熟悉 npm 完善的生态系统 npm OS无关的包管理机制 主要原因还是归咎于npm 完善的生态,目前npm官方有47.5万个三方包可供使用,你可以很方便的使用一些已经编写的很不错的轮子去帮你快速开发.另一方面,你不需要考虑跨平台的安装问题,比如OSX上的homebrew.Debian

随机推荐