本文详细演示如何使用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源码
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。