创建命令行工具并发布成npm包

小灰灰 2022-12-10 15:53 166阅读 0赞

## 前言 ##

项目中可能会频繁的新建一些移动端、pc端页面，每次通过cv大法（复制粘贴）会比较繁琐。因此实际工作中，我们可以通过发布成npm包的命令行工具来简化工作流程，每次通过几个简单的命令就能得到理想的初始项目文件，初始项目文件可以将封装好的`axios`、常用的`UI`框架、`reset.css`等基本配置提前搭建好。

## 开发环境 ##

*  [node安装][node]
 *  [git安装][git]
 *  [npm账号注册][npm]

开发前需要先在本地环境安装`node.js`、`git`、注册npm账号。

## 项目结构 ##

最基本的项目结构  
![在这里插入图片描述][20200927110313836.png_pic_center]

## 编写代码 ##

1、通过`npm init`创建`package.json`文件

{
      "name": "vue-tem-cli",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "dependencies": {
        "chalk": "^3.0.0",
        "commander": "^4.1.1",
        "download-git-repo": "^3.0.2",
        "handlebars": "^4.7.3",
        "inquirer": "^7.0.4",
        "log-symbols": "^3.0.0",
        "ora": "^4.0.3"
      },
      "bin": {
        "vue-cli": "./index.js"
      },
      "author": "factory011",
      "license": "ISC"
    }

2、执行`npm i`安装项目依赖  
3、`index.js`代码编写

#!/usr/bin/env node
    
    const fs = require('fs');
    const program = require('commander');
    const download = require('download-git-repo');
    const handlebars = require('handlebars');
    const inquirer = require('inquirer');
    const ora = require('ora');
    const chalk = require('chalk');
    const symbols = require('log-symbols');
    program.version('1.0.0', '-v, --version')
    	.command('init <name>')
    	.action((name) => {
    		if (!fs.existsSync(name)) {
    			inquirer.prompt([
    				{
    					name: 'description',
    					message: '请输入项目描述：'
    				},
    				{
    					name: 'author',
    					message: '请输入作者名称：'
    				},
    				{
    					name: 'template',
    					message: '请输入模板类型（pc/app）：'
    				}
    			]).then((answers) => {
    				const spinner = ora('模板下载进行中...');
    				spinner.start();
    				const template_app = 'https://github.com:factory011/vue-app-rem-template#master';
    				const template_pc = 'https://github.com:factory011/vue-pc-template#master';
    				const TEMPLATE = answers.template === 'pc' ? template_pc : template_app;
    				download(TEMPLATE, name, { clone: true }, (err) => {
    					if (err) {
    						spinner.fail();
    						console.log(symbols.error, chalk.red(err));
    					} else {
    						spinner.succeed();
    						const fileName = `${name}/package.json`;
    						const meta = {
    							name,
    							description: answers.description,
    							author: answers.author
    						}
    						if (fs.existsSync(fileName)) {
    							const content = fs.readFileSync(fileName).toString();
    							const result = handlebars.compile(content)(meta);
    							fs.writeFileSync(fileName, result);
    						}
    						console.log(symbols.success, chalk.green('项目初始化完成'));
    					}
    				})
    			})
    		} else {
    			// 错误提示项目已存在，避免覆盖原有项目
    			console.log(symbols.error, chalk.red('项目已存在'));
    		}
    	})
    program.parse(process.argv);

这是`github`上搭建的模板文件下载地址，可以自行替换成自己的。

const template_app = 'https://github.com:factory011/vue-app-rem-template#master';
    const template_pc = 'https://github.com:factory011/vue-pc-template#master';

## 发布到npm ##

1、执行`npm config get registry`

https://registry.npm.taobao.org/

2、配置本地仓库`npm config set registry=http://registry.npmjs.org`  
3、执行`npm adduser`  
4、执行`npm publish`  
5、执行成功后，在npm官网的个人资料中能查看到发布的包  
6、**`最后记得将本地仓库还原`**

npm config set registry=https://registry.npm.taobao.org/

## 项目运行 ##

全局安装npm包

npm i vue-rem-cli -g

创建初始项目

vue-cli init vue-pc-demo

命令组成：  
`vue-cli`是`package.json`中的配置项

"bin": {
        "vue-cli": "./index.js"
      },

`init`是通过`commander`配置的命令

program.version('1.0.0', '-v, --version')
    	.command('init <name>')

`vue-pc-demo`是项目名称

最终执行结果如下：  
![在这里插入图片描述][20200927132956508.png_pic_center]  
![在这里插入图片描述][20200927133914546.png_pic_center]

[node]: https://blog.csdn.net/YouZi_X/article/details/107305216
[git]: https://blog.csdn.net/weixin_44950987/article/details/102619708
[npm]: https://www.npmjs.com/
[20200927110313836.png_pic_center]: /images/20221123/4d26fd8ddc974fdaa57138859caee5a7.png
[20200927132956508.png_pic_center]: /images/20221123/966d2d61cc494d86898c243da2735f5e.png
[20200927133914546.png_pic_center]: /images/20221123/524d67241c154d1885437e18944fdf86.png