详解用node编写自己的cli工具


Posted in Javascript onMay 23, 2017

工作中接到新项目,开发前都需要先规划项目目录,然后一个个创建文件,搭建sass编译环境,下载jquery,Swiper等类库... 这些准备工作都要花上不少时间。每做一个项目,都会遇到同样的问题,再重复一遍吗?
是时候做点改变了:编写自己的cli工具,一行命令,3秒钟进入coding状态!

本文以自己的my-cli为例,将开发到发布过程完整记录下来,看完本文,你将学会如何从零开发一个cli项目,如何上传到github库,以及如何使用npm发布自己的包。

准备

开发一个cli工具前首先要想好它能做什么。以我自己为例,我需要一个工具,让我能只输入一行命令就帮我快速搭建好项目结构,就像这样:

详解用node编写自己的cli工具

是不是很炫酷?放心,很简单。

开始

首先创建你的cli项目,并使用npm init创建一个package.json。

$ mkdir my-cli && cd my-cli
$ npm init

根据提示一步步创建好package.json。name属性就是你发布到npm上的名字,这个是不能与npm上现有项目重名的,一个小技巧是使用npm install下载你想要起的包名字,如果报错404,那么你的包名是可用的。最后创建好的package.json文件像这样子:

{
 "name": "my-cli",
 "version": "0.0.1",
 "description": "Auto generate project template",
 "main": "index.js",
 "bin": {
  "my-cli": "./index.js"
 },
 "repository": {
  "type": "git",
  "url": "git+https://github.com/hlme/my-cli.git"
 },
 "keywords": [
  "cli"
 ],
 "author": "798400626@qq.com",
 "license": "MIT",
 "bugs": {
  "url": "https://github.com/hlme/my-cli/issues"
 },
 "homepage": "https://github.com/hlme/my-cli#readme"
}

编写可执行文件

package.json中有一个"bin"字段,配置后才可以在控制台使用你的命令。

"bin": {
 "my-cli": "./index.js"
}

我们配置了"my-cli"命令来执行index.js文件。用你喜欢的编辑器,在项目主目录下创建一个index.js文件。

详解用node编写自己的cli工具

注意第一行的"#! node"很重要,表示用node来执行这个文件。如果没有这句声明,就会在记事本中打开index.js文件。

全局安装你的包

使用 npm install -g 将你当前的项目安装到全局环境,现在你可以在命令行使用"my-cli"命令了。

详解用node编写自己的cli工具

用fs模块快速生成项目模板

我们自定义的指令可以执行了,接下来编写代码实现功能。my-cli的主要功能就是生成项目模板,一个思路是用一个templates文件夹保存项目模板,然后通过fs.mkdir()来创建项目目录,最后把文件从templates文件夹拷贝到项目中去。

var fs = require('fs');
var path = require('path');

function copyTemplate (from, to) {
 from = path.join(__dirname, 'templates', from);
 write(to, fs.readFileSync(from, 'utf-8'))
}
function write (path, str, mode) {
 fs.writeFileSync(path, str)
}
function mkdir (path, fn) {
 fs.mkdir(path, function (err) {
  fn && fn()
 })
}

核心代码就这么点,是不是非常简单?

整个项目文件结构差不多就这个样子,把你需要的文件放到templates文件夹,然后用copyTemplate方法将文件拷贝到项目目录下。

详解用node编写自己的cli工具

创建文件目录和拷贝文件的过程,代码看着比较丑陋

详解用node编写自己的cli工具

接收命令行参数

平常我们使用命令行工具时都会用到参数,如 webpack -p, express -e 等,现在我们来为自己的cli添加接收命令行参数的功能。为my-cli设计四个参数,用来向项目中添加类库。

$ my-cli -j -s -v -b
//-j :添加jQuery
//-s :添加Swiper
//-v :添加Vue
//-b :添加Bootstrap

使用commander包可以简化解析参数过程,但是本项目比较简单,我也不想额外引入其他的包了,处理一些简单的参数其实并不难。

node中我们可以使用process.argv来获取命令行参数,process.argv是一个参数数组,第一项为node.exe的绝对路径,第二项为执行该js的绝对路径,使用process.argv.slice(2)即可获取输入的参数数组。

详解用node编写自己的cli工具

通过遍历参数数组来检查命令中输入了哪些参数。如果输入了预设的参数,就为config对象添加对应的属性,在生成文件时根据onfig判断是否将模板文件拷贝到项目中。继续丑陋的代码:

详解用node编写自己的cli工具

本地运行

至此我们的项目已经基本完成了,使用 npm install -g 将项目安装到全局环境,然后新建一个项目文件夹,使用my-cli命令来生成项目模板。

详解用node编写自己的cli工具

发布到npm仓库

要想将自己的包发布到npm上,首先得有一个npm账号,创建账号非常简单,输入npm adduser,简单三步即可完成创建。

详解用node编写自己的cli工具

创建好user后,使用npm publish即可将当前项目发布到npm上了,以后就可以使用npm install -g my-cli 来安装你的cli工具。

详解用node编写自己的cli工具

结束语

相信大家看完本文后知道如何根据自己的需求制作cli工具了。本文中的my-cli比较简单,权当做抛砖引玉。如果想查看完整源码或者使用这个工具,可以戳这里:github地址。

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

Javascript 相关文章推荐
js获取图片长和宽度的代码
Nov 24 Javascript
jQuery内部原理和实现方式浅析
Feb 03 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
JavaScript中的acos()方法使用详解
Jun 14 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
jQuery实现动画效果circle实例
Aug 06 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
Aug 09 Javascript
使用vue-router设置每个页面的title方法
Feb 11 Javascript
Node.js 使用request模块下载文件的实例
Sep 05 Javascript
详解VS Code使用之Vue工程配置format代码格式化
Mar 20 Javascript
JS实现导航栏楼层特效
Jan 01 Javascript
JavaScript 巧学巧用
May 23 #Javascript
JS获取短信验证码倒计时的实现代码
May 22 #Javascript
原生JS实现不断变化的标签
May 22 #Javascript
jQuery实现简单的滑动导航代码(移动端)
May 22 #jQuery
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 #Javascript
Vue实现动态显示textarea剩余字数
May 22 #Javascript
bootstrap栅格系统示例代码分享
May 22 #Javascript
You might like
《PHP边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
php中取得文件的后缀名?
2012/02/20 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
Git命令之分支详解
2021/03/02 PHP
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
Javascript学习笔记1 数据类型
2010/01/11 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
javascript实现随机生成DIV背景色
2016/06/20 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
python多线程编程中的join函数使用心得
2014/09/02 Python
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
pycharm远程调试openstack代码
2017/11/21 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
Python 普通最小二乘法(OLS)进行多项式拟合的方法
2018/12/29 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
TOWER London官网:鞋子、靴子、运动鞋等
2019/07/14 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
进修护士自我鉴定
2013/10/14 职场文书
应聘自荐信
2013/12/14 职场文书
创先争优活动方案
2014/02/12 职场文书
党员个人剖析材料(四风问题)
2014/10/07 职场文书
2014年团总支工作总结
2014/11/21 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书