详解用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 相关文章推荐
javascript 学习之旅 (1)
Feb 05 Javascript
JavaScript 乱码问题
Aug 06 Javascript
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
js 限制数字 js限制输入实现代码
Dec 04 Javascript
防止浏览器记住用户名及密码的简单实用方法
Apr 22 Javascript
js借助ActiveXObject实现创建文件
Sep 29 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
Mar 05 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 Javascript
详解如何在Canvas中添加事件的方法
Apr 17 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
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
用PHP实现小型站点广告管理
2006/10/09 PHP
php在多维数组中根据键名快速查询其父键以及父键值的代码
2011/05/07 PHP
PHP 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
php输出xml必须header的解决方法
2014/10/17 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
jquery下组织javascript代码(js函数化)
2010/08/25 Javascript
jquery中获取元素的几种方式小结
2011/07/05 Javascript
JS实现时间格式化的方式汇总
2013/10/16 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
Python读取excel中的图片完美解决方法
2018/07/27 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
pyecharts动态轨迹图的实现示例
2020/04/17 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
优秀员工年终发言演讲稿
2014/01/01 职场文书
大学毕业后的十年规划
2014/01/07 职场文书
聊城大学毕业生自荐书
2014/02/01 职场文书
个人承诺书怎么写
2014/05/24 职场文书
学习张丽丽心得体会
2014/09/03 职场文书
初中英语教学反思范文
2016/02/15 职场文书
Python中使用tkFileDialog实现文件选择、保存和路径选择
2022/05/20 Python