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 相关文章推荐
JavaScript中__proto__与prototype的关系深入理解
Dec 04 Javascript
js日期时间补零的小例子
Mar 05 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
JavaScript中字面量与函数的基本使用知识
Oct 20 Javascript
jQuery树形控件zTree使用小结
Aug 02 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
webpack项目使用eslint建立代码规范实现
May 16 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
Jul 09 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 Javascript
react PropTypes校验传递的值操作示例
Apr 28 Javascript
js 数组 fill() 填充方法
Nov 02 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
同时提取多条新闻中的文本一例
2006/10/09 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
php 判断服务器操作系统的类型
2014/02/17 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
php生成图片验证码的方法
2016/04/15 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
egg.js的基本使用和调用数据库的方法示例
2019/05/18 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
python 进程池pool使用详解
2020/10/15 Python
质检部经理岗位职责
2014/02/19 职场文书
手机被没收的检讨书
2014/10/04 职场文书
单位工作证明书格式
2014/10/04 职场文书
大学生求职意向书
2015/05/11 职场文书
水知道答案观后感
2015/06/08 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
分析设计模式之模板方法Java实现
2021/06/23 Java/Android
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫