当前位置：首页 > 全部内容 > 使用Node.js和npm开发命令行工具(CLI)完整指南

使用Node.js和npm开发命令行工具(CLI)完整指南

作者：夜航船时间：2026-10-22 09:09:31浏览：465

本文详细演示如何使用Node.js和npm创建并发布一个命令行工具。通过配置package.json的bin字段、使用Commander.js处理参数、编写核心功能逻辑，并借助npm link进行本地调试，最终完成工具的发布。适合希望简化开发流程的前端开发者参考。

前言与背景

前言

如果你希望开发npm插件，或者希望通过命令行简化日常操作流程，甚至只是单纯想偷懒，那么这篇文章非常适合你阅读。

在上一篇文章中，作者介绍了如何定制个人模板，但作者仍觉得不够便捷。在实际项目中，频繁新建页面、逻辑代码和样式文件时，手动创建并复制基础代码非常繁琐。因此，本文旨在一步步演示如何制作一个npm命令行插件，以解决这一痛点。

前言与背景

准备工作：注册npm账户

注册npm账户

发布npm插件的前提是拥有一个npm账号。注册过程较为简单，此处不再赘述，请直接前往官方渠道操作。

npm官网

拥有账号后，在项目根目录执行npm init命令生成package.json配置文件。按照提示填写基本信息后，即可开始编写核心逻辑代码。

核心开发：编写命令入口

编写命令入口

首先，我们需要了解项目的整体结构。


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

实例命令的代码主要放置在bin目录下。接下来，需要在package.json配置文件中启用该命令，具体做法是添加一个名为bin的配置项，指向你的入口脚本。


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

随后，需要安装一个依赖库。这里推荐使用由TJ Holowaychuk开发的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');  >>引入

该文件作为命令的入口文件。第一行代码必须添加#!/usr/bin/env node，这是因为脚本解释器在Linux系统中可能安装在不同的目录。使用env可以在系统的PATH环境变量中自动查找解释器，并规定相关系统环境变量。这种写法确保了程序在不同操作系统上的兼容性。

在此阶段，你可以对自制的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;
  }
};

这里引入了两个新的依赖库：一个是用于命令行输出彩色文本的chalk，另一个是用于文件操作的fs-extra。这两个库都可以通过npm安装获取。


$ npm i fs-extra --save

$ npm i chalk --save

该JS文件导出了一个run函数供xu-generate.js调用。通过接收用户输入的type和name参数，程序利用Node.js的fs模块（此处封装为fs-extra依赖，但核心原理仍基于fs）将template模板文件复制到用户的项目目录中。

至此，命令的核心开发工作已完成。该命令能够快速生成项目的模板文件，提高开发效率。

本地测试与发布流程

本地测试

npm包的开发与Web开发不同，无法直接在浏览器中预览。你可以在实例目录下建立一个test文件夹，通过node test命令来测试逻辑。如果某些功能需要在发布后才能验证，可以使用npm link命令将本地模块链接到全局环境。当然，你也可以选择先发布插件，再像安装普通插件一样进行自我测试。

发布npm包

首先，在项目根目录执行npm login命令进行登录。


$ npm login 

$ npm publish

如果遇到报错，可能是因为你之前使用了cnpm镜像地址，需要将npm仓库源设置回官方地址。


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

接着，更新npm包的版本号，确保新版本号大于上一次发布的版本。

总结与建议

后记

至此，一个入门级的npm包制作完毕。回想刚接触前端时，看到别人制作的插件功能强大，只需简单安装即可使用，令人羡慕。但当面对Node.js环境及大量陌生代码时，往往感到无从下手（例如直接复制vue-cli源码时，面对一堆代码容易一头雾水，资深开发者请忽略此感慨）。

学习是一个循序渐进的过程。如果没有一定的基础和长时间的积累，直接研读大牛编写的源码往往效率低下。虽然硬啃也可以，但循序渐进的学习方式显然更为高效。

目前插件已发布，GitHub上也提供了完整源码。感兴趣的同学可以fork下来自行研究。从事这一行，跟随自己的兴趣走，通常不会出错。

传送门： npm地址

传送门：github源码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

作者最新文章

在 NestJS 中使用管道验证数据与守卫控制访问权限

2026-11-05 12:43:41

Node.js后端生成高强度随机字符串的方法

2026-11-04 16:29:54

Node.js环境中怎么使用axios或http模块发送GET请求

2026-11-03 21:57:15

Node.js环境下怎么实现JS反混淆自动化？常用库与CLI工具推荐

2026-11-03 21:15:54

解决JS逆向常见报错：缺少DOM环境导致代码运行失败

2026-11-03 20:41:59