npm全局包及cli制作方法

全局命令注册:

首先说一下npm全局包,npm install xxx -g 即为全局安装,全局安装的npm包一般都带有cmd命令,比如安装vue-cli后执行“vue create XXX”即可生成一个新的vue项目模版,再比如安装http-serve后执行“http-serve”命令可以本地起一个静态服务
那么这些全局命令怎么实现的呢?其实很简单只需要在package.json文件里增加一个 "bin" 属性即可:

"version": "0.0.1",
"description": "",
"bin": {
    "vue-common": "./bin/index"
 },

这样把包上传并全局安装后则会在本地注册一个全局命令,但是我们看到一般这种全局命令都会传若干个参数,例如最常见的:“npm i xxx -g”,"npm -version"这个是怎么做到的呢?这个时候“commander”该出场了,“npm install commander --save”即可本地安装保存,下面给一个简单的使用示例:

#!/usr/bin/env node

const program = require('commander')

program
  .version('0.0.1', '-v, --version')

program.on('--help', function () {
  console.log('no help can use')
});

program
  .command('create <app-name>')
  .description('create a new project')
  .action((name, cmd) => {
    console.log('your app name is ' + name);
    console.log('your cmd is '+ cmd);
  })

program.parse(process.argv);

其中上面的action里的回调方法接受两个参数,第二个参数实际上是一个object,借鉴vue-cli里的一个处理方法:

function camelize (str) {
  return str.replace(/-(\w)/g, (_, c) => c ? c.toUpperCase() : '')
}
// commander passes the Command object itself as options,
// extract only actual options into a fresh object.
function cleanArgs (cmd) {
  const args = {}
  cmd.options.forEach(o => {
    const key = camelize(o.long.replace(/^--/, ''))
    // if an option is not present and Command has a method with the same name
    // it should not be copied
    if (typeof cmd[key] !== 'function' && typeof cmd[key] !== 'undefined') {
      args[key] = cmd[key]
    }
  })
  return args
}

有关于commander的用法就讲到这里,因为还有很多,如果直接看官方文档看不明白的可以选择直接阅读vue-cli的源码,里面相关的使用较多,可以参考借鉴

本地调试npm包:

执行npm link即可,该命令会生成一条软链,指向全局包,即

npm link
/usr/local/bin/vue-common -> /usr/local/lib/node_modules/vue-fe-common/bin/index.js
/usr/local/lib/node_modules/vue-fe-common -> /Users/dong/Desktop/draft/command

输出第一行的意思是“vue-common”命令指向的具体文件位置(这个位置并非包在本机的开发路径),第二行是被link到全局的vue-fe-common包指向的实际位置

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 前端日常开发中,会遇见各种各样的cli,比如一行命令帮你打包的webpack,一行命令帮你生成vue项目模板的vu...
    CharTen阅读 19,325评论 6 40
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 2,241评论 0 2
  • 1、npm是什么? NPM (node package manager),通常称为node包管理器。顾名思义,它的...
    徐国军_plus阅读 7,149评论 1 6
  • 最近一段时间vue js非常流行,伴随着vue2.0版本的发布,一套前端基于node环境下的自动化环境构建方法随之...
    飘落的枫阅读 1,540评论 0 2
  • 思想: 快排法主要是运用二分法的思想来对一批数字进行排序,这种排序方法好处是比冒泡排序节省时间,因为冒泡排序是两两...
    逍然阅读 1,769评论 0 1

友情链接更多精彩内容