node通过npm写一个cli命令行工具


Posted in Javascript onOctober 12, 2017

前言

如果你想写一个npm插件,如果你想通过命令行来简化自己的操作,如果你也是个懒惰的人,那么这篇文章值得一看。

po主的上一篇文章介绍了定制自己的模版,但这样po主还是不满足啊,项目中我们频繁的需要新建一些页面,逻辑样式等文件,每次都手动new一个,然后复制一些基本代码进去非常的麻烦,所以就有了这篇文章。接下来就让po主为大家一步一步演示怎么做一个npm命令行插件。

node通过npm写一个cli命令行工具

注册npm账户

发布npm插件,首先肯定要有个npm帐号了,过程就不??铝耍?吣恪?/p>

npm官网

有了账号后,我们通过npm init 生成一个package配置文件,填写一些你的信息,然后就可以开始写逻辑代码了。

编写命令入口

首先看一下项目结构

.
├── bin      //命令配置
├── README.md   //说明文档
├── index.js   //主入口
├── src      //功能文件
├── package.json //包信息
└── test     //测试用例

实例命令代码都是写在bin目录下,我们现在配置文件package文件中启用命令,添加一个配置项bin

"bin": {
    "xu": "./bin/xu.js"
  },

然后安装一个依赖,TJ大神写的commander插件,

npm i commander --save

有了这个工具我们可以很方便的编写命令代码

xu.js

#!/usr/bin/env node

process.title = 'xu';

require('commander')
.version(require('../package').version)
.usage('<command> [options]')
.command('generate', 'generate file from a template (short-cut alias: "g")')
.parse(process.argv)


require('./xu-generate');  >>引入

这个文件可以看作是入口文件,第一行代码是必须添加的,脚本用env启动的原因,是因为脚本解释器在linux中可能被安装于不同的目录,env可以在系统的PATH目录中查找。同时,env还规定一些系统环境变量。 这种写法主要是为了让你的程序在不同的系统上都能适用。

在这一步,你可以简单测试你自己的npm插件

$ node ./bin/xu.js

>>> 输出一些插件usage。help信息

关于commander,大家可以去作者的Github先学习了解,这里不对参数讲解。

xu-generate.js

#!/usr/bin/env node

const program = require('commander');
const chalk = require('chalk')
const xu = require('../src/generate');


/**
 * Usage.
 */

program
.command('generate')
.description('quick generate your file')
.alias('g')
.action(function(type, name){
  xu.run(type, name);
});
program.parse(process.argv);

这就是功能命令,定义了一个generate命令,.alias('g')是该命令的缩写,然后.action(function(type, name){xu.run(type, name); });返回一个函数,这个函数就是我们定义这个命令需要做什么事。

编写功能函数

./src/generate.js

这个文件就定义了当我们输入

$ xu g

所做的操作了。

/**
 * Created by xushaoping on 17/10/11.
 */

const fs = require('fs-extra')
const chalk = require('chalk')
exports.run = function(type, name) {
  switch (type) {
    case 'page':
      const pageFile = './src/page/' + name + '/' + name + '.vue'
      const styleFile = './src/page/' + name + '/' + name + '.less'
      fs.pathExists(pageFile, (err, exists) => {
        if (exists) {
          console.log('this file has created')
        } else {
          fs.copy('/usr/local/lib/node_modules/vue-xu-generate/src/template/page.vue', pageFile, err => {
            if (err) return console.error(err)
        
            console.log(pageFile + ' has created')
          })
          fs.copy('/usr/local/lib/node_modules/vue-xu-generate/src/template/page.less', styleFile, err => {
            if (err) return console.error(err)
        
            console.log(styleFile + ' has created')
          })
        }
      })
      break;
    case 'component':
      const componentFile = './src/components/' + name + '.vue'
      fs.pathExists(componentFile, (err, exists) => {
        if (exists) {
          console.log('this file has created')
        } else {
          fs.copy('/usr/local/lib/node_modules/vue-xu-generate/src/template/component.vue', componentFile, err => {
            if (err) return console.error(err)
          
            console.log(componentFile + ' has created')
          })
        }
      })
      break;
    case 'store':
      const storeFile = './src/store/modules' + name + '.js'
      fs.pathExists(storeFile, (err, exists) => {
        if (exists) {
          console.log('this file has created')
        } else {
          fs.copy('/usr/local/lib/node_modules/vue-xu-generate/src/template/store.js', storeFile, err => {
            if (err) return console.error(err)
          
            console.log(storeFile + ' has created')
          })
        }
      })
      break;
    default:
      console.log(chalk.red(`ERROR: uncaught type , you should input like $ xu g page demo` ))
      console.log()
      console.log(' Examples:')
      console.log()
      console.log(chalk.gray('  # create a new page'))
      console.log('  $ xu g page product')
      console.log()
      console.log(chalk.gray('  # create a new component'))
      console.log('  $ xu g component product')
      console.log()
      console.log(chalk.gray('  # create a new store'))
      console.log('  $ xu g store product')
      console.log()
      break;
  }
};

这里有2个新的依赖,分别是命令输出颜色和一个文件操作的插件,通过npm安装。

$ npm i fs-extra --save

$ npm i chalk --save

这个js文件导出了一个run函数给 xu-generate.js调用,我们通过参数拿到了用户输入的type,name,然后就可以根据type通过node fs模块(这里用了一个依赖,不过原理还是fs)操作把template文件复制了一份到你的项目中。

到这,我们就已经完成了一个命令的开发,这个命令可以快速生成项目的模版文件。

本地测试

npm包开发不像web开发,可以直接在浏览器看,实例目录下建立一个test文件,再 node test 就可以测试我们的逻辑。如果有一些功能需要在发布后才能测,npm 有个 link命令 可以连接你本地的模块,当然你也可以发布后 自己安装插件测试,就跟平时引入一个插件一样。

发布npm包

首先在项目根目录执行npm登陆

$ npm login 

$ npm publish

如果这里有个报错,可能是你使用了cnpm地址,需要把npm仓库设置回来

$ npm config set registry https://registry.npmjs.org/

然后,更新更新npm包,版本号需要大于上一次

后记

至此,一个入门级的npm包就制作完成了。万分感慨,记得刚入门前端的时候看到别人的插件做的真牛,自己只要简单安装一下就能搞得那么漂亮,想搞~但是看到一堆陌生的东西,立刻怂了(node环境,东西非常非常多,直接拷个vue-cli看到一对代码,一头雾水。。。大牛请无视)

学习是一个循序渐进的过程,大牛写出来的东西,没有一定的基础,和长时间的积累经验,源码是很难学习。非要啃,也行,只是效率感觉不如循序渐进来的好。

插件已经发布,Github也有完整源码,想学习的同学可以fork一个自己玩玩,干这一行~随心所动 ,跟着兴趣走,准没错

传送门: npm地址

传送门:github源码

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

Javascript 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
JavaScript delete操作符应用实例
Jan 13 Javascript
JavaScript Event学习第七章 事件属性
Feb 07 Javascript
js Date自定义函数 延迟脚本执行
Mar 10 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
面向对象的Javascript之一(初识Javascript)
Jan 20 Javascript
js的Prototype属性解释及常用方法
May 08 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
原生JS仿QQ阅读点击展开、收起效果
Mar 08 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 #Javascript
AngularJS实现表单验证功能详解
Oct 12 #Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 #Javascript
AngularJS 中的数据源的循环输出
Oct 12 #Javascript
详解微信小程序中的页面代码中的模板的封装
Oct 12 #Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 #Javascript
Angular实现预加载延迟模块的示例
Oct 12 #Javascript
You might like
西德产收音机
2021/03/01 无线电
php的ajax框架xajax入门与试用介绍
2010/12/19 PHP
可以支持多中格式的JS键盘
2007/05/02 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
使用JS获取当前地理位置方法汇总
2014/12/18 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
Bootstrap字体图标无法正常显示的解决方法
2016/10/08 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
NodeJs搭建本地服务器之使用手机访问的实例讲解
2018/05/12 NodeJs
JavaScript中AOP的实现与应用
2019/05/06 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
vuex实现购物车的增加减少移除
2020/06/28 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
wxpython 学习笔记 第一天
2009/03/16 Python
python创建和使用字典实例详解
2013/11/01 Python
python插入数据到列表的方法
2015/04/30 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
公共汽车、火车和飞机票的通用在线预订和销售平台:INFOBUS
2019/11/30 全球购物
财务会计专业个人求职信范本
2014/01/08 职场文书
装饰活动策划方案
2014/02/11 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
亲子活动总结
2014/04/26 职场文书
国旗下的演讲稿
2014/05/08 职场文书
图书馆标语
2014/06/19 职场文书
小学生植树节活动总结
2014/07/04 职场文书
课外小组活动总结
2014/08/27 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
解除劳动关系协议书2篇
2014/11/28 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
Python中requests做接口测试的方法
2021/05/30 Python