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 相关文章推荐
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
Nov 30 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
js实现html table 行,列锁定的简单实例
Oct 13 Javascript
微信小程序 监听手势滑动切换页面实例详解
Jun 15 Javascript
使用JS编写的随机抽取号码的小程序
Aug 11 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
Aug 18 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 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
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
php增删改查示例自己写的demo
2013/09/04 PHP
php利用新浪接口查询ip获取地理位置示例
2014/01/20 PHP
php实现telnet功能示例
2014/04/08 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
送你43道JS面试题(收藏)
2019/06/17 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
js实现多图和单图上传显示
2019/12/18 Javascript
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
Python实现FTP文件传输的实例
2019/07/07 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
Pandas中DataFrame基本函数整理(小结)
2020/07/20 Python
网络技术支持面试题
2013/04/22 面试题
客服主管岗位职责
2013/12/13 职场文书
销售会计岗位职责
2014/03/15 职场文书
商铺租房协议书范本
2014/12/04 职场文书
电力工程合作意向书
2015/05/11 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery
Python 正则模块详情
2021/11/02 Python
以下牛机,你有几个
2022/04/05 无线电
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript