面试官:请简述一下vue-cli命令行工具,你能自己手写一个吗?
还记得我们在写vue 项目的时候用脚手架vue-init的主要作用是根据指定模板生成项目原型嘛?那么vue-init怎么实现的呢? 其实就是在vue-cli package.json中增加下面的代码
{"bin": {"vue": "bin/vue","vue-init": "bin/vue-init", //执行vue-init 的时候下载项目原型"vue-list": "bin/vue-list","vue-build": "bin/vue-build"}
}复制代码
具体实现请看下面:
本篇的主要内容是:实现可以在命令行中,直接运行代码(下面的名字可以自己取)。
xl-cli install (安装)
复制代码
在实现自己的命令行运行代码前,你需要对命令行,npm(包管理器)的基本用法有些了解。 下面进入正题:
//创建一个 xl-cli文件夹 mkdir xl-cli
// cd xl-cli
// npm init 初始化
复制代码
完成上面几个步骤之后 我们能看到生成了一个xl-cli文件夹 文件中包含一个package.json文件。
{"name": "xl-cli","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC"
}
复制代码
我们知道在npm run xxx的时候其实就是执行的package.json中的scripts,比如上面 你看看npm run test就会输出Error: no test specified,我们的代码用的es6需要编译成es5,先创建一个npm run compile,(test没用,同时给test删掉)
{"name": "xl-cli","version": "1.0.0","description": "","main": "index.js","scripts": {"compile": "babel src -d dist"},"author": "","license": "ISC"
}
复制代码
我们需要安装babel 创建 (安装babel-cli babel-env)
src --main.js
复制代码
这个时候我们执行 npm run compile其实就是相当于在命令行中输入了 babel src -d dist 然后我们看到了生成了一个这样的目录:
dist--main.js
复制代码
我们经常会有这样的需求就是在更改src 里面的内容的时候 同步更改dist里面的内容,可以这样做:在package.json的scripts增加一个 watch命令:
{"name": "xl-cli","version": "1.0.0","description": "","main": "index.js","scripts": {"compile": "babel src -d dist","watch":"npm run compile -- --watch"},"author": "","license": "ISC"
}
复制代码
然后运行 npm run watch命令 就实现了同步更新了!
下面实现 xl-cli命令行
创建 ./bin/www目录, 要实现在命令行中使用 类似vue-cli这样的命令 需要在package.json中增加
"bin": {"xl-cli": "./bin/www"},
复制代码
./bin/www中的内容:
#! /usr/bin/env noderequire('../dist/main.js');
复制代码
第一行 最后的node是表示node环境 前面参数写死的,第二行表示执行的代码 ,创建完成后执行npm link,相当于在本地添加环境变量。 至此,你已经可以执行xl-cli命令了,其实就是执行了dist/main.js。
实现像其他命令行中的xl-cli --help 先引入一个包 commander ,这个包可以帮助我们设置和解析命令参数。 src/main.js
//main.js
import program from 'commander';import {VERSION} from './utils/constants';program.command('install') //加命令 .description('install template').alias('i').action(() => {console.log('用户install了')})program.version(VERSION,'-v --version').parse(process.argv); //加 option
复制代码
我们可以看到在命令窗口输入 xl-cli install 会打印出:
用户install了
复制代码
好了 到现在我们就剩下执行下载模板任务了,这样我们新建一个install.js来执行下载任务
//install.js
import ora from 'ora'; //ora 一个命令行loading效果
import inquirer from 'inquirer' //命令行交互
import downLoadGit from 'download-git-repo'; //github api用来下载github的模板let install = async () => {// 下载模板 let loading = ora('fetching template......');let answer = await inquirer.prompt([{type: 'input', //你可以输入你自己的名称name: 'projectName',message:'项目名称',default:'xlDemo' //默认名}]);// 项目名字let project = answer.projectName;loading.start();//我在github上面上传了一个非常简单的模板 xlei1123/xl-cli downLoadGit(src, dest) 从哪拉 拉到那 process.cwd()+'/'+project这是拉到了当前目录下的你刚刚命名的文件中downLoadGit('xlei1123/xl-cli',process.cwd()+'/'+project,(err) => { if(err) {console.log(err)return;}console.log(process.cwd()+'/'+project)loading.succeed();});
}
export default install;
复制代码
这样在上面的action中执行 install()就好了!
//main.js
import program from 'commander';
import {VERSION} from './utils/constants';import install from './install'
program.command('install') //加命令 .description('install template').alias('i').action(() => {install()})program.version(VERSION,'-v --version').parse(process.argv); //加 option
复制代码
这样我们就完成了自己cli了,可以执行下面几个简单的命令看一下效果:
xl-cli --help
xl-cli -v
xl-cli install
复制代码
一句话总结:我们发布了一个npm包 这个包的package.json中有bin可以全局执行,判断参数有install,就从github上面拉取模板。
当然这篇实现的是简单的命令行工具主要是理解其中大致原理,肯定会存在很多不足的地方,欢迎各位提出宝贵的意见或建议,也希望能帮助到你从中获得一些知识!
面试官:请简述一下vue-cli命令行工具,你能自己手写一个吗?相关推荐
- Jenkins CLI命令行工具,助你轻松管理 Jenkins
Jenkins CLI,简称 jcli,一个使用 Golang 开发的开源的 Jenkins 命令行工具.它可以帮忙你轻松地管理 Jenkins.无论你是 Jenkins 插件开发者,还是 Jenki ...
- post工具_GitHub CLI 命令行工具使用
GitHub 被巨软收购以后推出了一系列非常好用的开发者工具,比如前面我们使用过的 CI/CD 工具 GitHub Actions.包管理工具 packages,今天我们要为大家介绍的是近来 GitH ...
- 使用 SAP UI5 CLI 命令行工具构建和运行 SAP UI5 应用
源代码 Github 地址:https://github.com/wangzixi-diablo/ui5-for-kyma 本地路径:C:\Code\frontend-ui5-mssql 本文介绍 S ...
- 使用cobra创建cli命令行工具
什么是cobra? Cobra既是用于创建强大的现代CLI应用程序的库,也是用于生成应用程序和命令文件的程序. Cobra是一个库,提供了一个简单的界面来创建类似于git&go工具的强大的现代 ...
- vue使用命令行构建完项目后_vue-cli 构建项目在IE中无法运行解决方式(build之后可运行)...
IE浏览器(只考虑IE11,更低版本我没考虑)运行时报 Promise未定义的错误 解决办法: 1. 安装babel-polyfill (1.) npm install babel-polyfill ...
- 使用.Net Core编写命令行工具(CLI)
使用.Net Core编写命令行工具(CLI) 命令行工具(CLI) 命令行工具(CLI)是在图形用户界面得到普及之前使用最为广泛的用户界面,它通常不支持鼠标,用户通过键盘输入指令,计算机接收到指令后 ...
- 【Android 命令行工具】Android 命令行工具简介 ( 官方文档 | SDK 命令行工具 | SDK 构建工具 | SDK 平台工具 | 模拟器工具 | Jetifier 工具 )
文章目录 一.官方文档 二.Android 命令行工具简介 1.SDK 命令行工具 2.SDK 构建工具 3.SDK 平台工具 4.模拟器工具 5.Jetifier 工具 一.官方文档 Android ...
- 自己写的python软件可以在哪发布-如何发布一个Python命令行工具
本文简介 上次写的一个终端里面斗鱼TV弹幕Python版本和Ruby版本,并且发布到PIP和RubyGems上面.在发布PIP包的时候,居然Google不到一篇可以非常好的讲解这个流程的文章.于是整理 ...
- JDK的命令行工具、故障处理分析工具
目录 •写在前面 •jps虚拟机进程状况工具 •jstat虚拟机统计信息监视工具 •jinfo配置信息工具 •jmap内存映像工具 •jhat虚拟机堆转储快照分析工具 •jstack堆栈跟踪器 •JC ...
- 图解sql server 命令行工具sqlcmd的使用
一 操作实例 安装了sql server后此工具已经有了: 以sa登录: 打个命令,没反映: 可执行操作系统命令:加上!!即可: 查看帮助: 再打命令,也没反映:查询结果不显示: 要加上go,才行: ...
最新文章
- Excel—SUMPRODUCT用法指南
- 不是你无法入门自然语言处理(NLP),而是你没找到正确的打开
- 教你搞定补码不恢复余数除法中够减和商的关系
- vscode重置应用程序_如何在Windows 10上重置应用程序的数据
- 非阻IO与EWOULDBLOCK EAGAIN
- git merge 回退_Git 基础学习总结2(学不会你锤我)
- Markdown语法--整理
- Unity3D核心类型一览
- RTSP,RTP,RTCP的区别
- c语言中函数已有主体,error C2084 函数已有主体(Function already has a body)解决方案...
- 《大学之路》读后感(1)
- 自动化测试之Appium
- mars3d-热力图
- 深度学习中梯度消失和梯度爆炸的根本原因及其缓解方法
- 利用vue-pdf插件来让pdf的base64数据显示在页面上
- Hadoop 学习路线图
- 怎样自己定制标签(Custom Tag)
- linux stopped 进程,Linux运维知识之Linux查杀stopped进程
- 资本退潮后,CEEC国际经贸链带你穿越币圈熊市!
- easyexcel 遇到的问题 org.terracotta.statistics.StatisticsManager.tags([Ljava/lang/String;)Ljava/util/Set;