开发npm工具

November 11, 2021

1244 views

No comments

3814 words

默认分类前端学习 JavaScript

开发npm工具

最近复习了Node，熟悉了npm的工作流程。而我在有时候开发会遇到一个比较繁琐问题，就是前期的项目集成准备。

每次搭建项目都需要引入各种库和配置，在搭建路由的时候需要创建页面然后再引入配置路由，引入ui然后配置等这些操作都很繁琐。所以可以先配置好一个脚手架，然后放到github上，再配合一些脚本命令自动化创建页面就能很好的简化项目操纵了。

前期准备

开发一个npm包工具。

基本功能：

从github上下载已经配置好的cli。
创建一些命令来自动化生成页面。

//todo 之后想实现功能命令行修改cli下载地址，默认提供多个地址切换

知识准备

通过Node实现命令工具核心依赖的库为commander.js。github地址为comander.js。

这个工具的作者tj是个很厉害的人，为javascript贡献很多开源的项目。

commander.js安装方式：

npm install commander

我们要实现下载功能可以依赖download-git-repo。

安装方式：

npm install download-git-repo

开始编写

文件夹结构设计

目前我设置的文件夹目录如下：

cli-helper
     -----lib
     -----index.js

初始化命令

我们要创建一个命令首先初始化package.json

npm init -y

然后设置入口文件(默认index.js)。

在入口文件的第一行添加一句代码：

#!/usr/bin/env node

这句话必须添加。作用是用来表明我们创建的命令由node来执行,同时让系统动态的去寻找node所在的位置，避免不同用户设置不一致的问题。

然后在package.json中添加bin属性，用来设置命令：
这里我设置的命令叫saber。

  "bin": {
    "saber": "index.js"
  },

之后我们还是不能使用该命令，或者发布到网上再下载使用，但这对于开发调试非常不方便。要想对我们编写的命令库进行测试的话可以使用npm link 。官网介绍npm link。

先举个例子了解下这个命令的作用：
比如我们开发这个npm工具叫做cli-helper，我们完成上述的配置操作在包所在的文件夹下执行命令saber，是会报错找不到该命令的。我们可以直接执行npm link这个命令的作用就是在全局环境下，生成一个符号链接文件，该文件的名字就是package.json文件中指定的模块名。同时我们对此模块的修改会实时反馈在全局目录下。我们可以通过命令：npm prefix -g去查看全局命令所在的位置。

比如我的位置在：

$ npm prefix -g
C:\Users\zhangheng\AppData\Roaming\npm

可以看到一些cmd的可执行文件。因为我们把我们要编写的模块连接到全局的node_modules中了。所以现在我们就可以全局使用该命令了。当然注意win自带控制台可能无法执行。

命令行开始

#!/usr/bin/env node

console.log('hello world')

运行命令：

saber

好了这样我们就学会了最基本的命令创建了。

获取版本号

命令一般可以通过 -V --version 获取版本号。

我们可以设置版本号，推荐直接引入package.json

#!/usr/bin/env node

//引入commander
const program = require("./lib/utils/init");
const packageJSON = require("./package.json");

//设置版本号，这里推荐引入package.json中的版本好
program.version(
  packageJSON.version,
  "-v, --version",
  "output the current version"
);


//解析全局变量
program.parse(process.argv);

创建命令

  program
    .command("create <project>")
    .description(
      "clone cli from repository into a folder. 例如：saber create vue"
    )
    .action(
      //todo something
      createProjectAction
    );

通过上述步骤，先通过command方法设置命令格式，<>传递必传参数，[]传递可选参数。然后通过description传递描述信息。然后在action中传递要执行的方法。

注意代码模块分开封装即可开始写命令了。具体的代码就不展示了，毕竟没有技术含量。

npm工具发布

我们编写好工具后需要发布，迭代，废弃，删除等步骤。

首先第一次发布流程：

修改package.json，设置一些信息啥的。

{
//...
   "keywords": [
    "vue3",
    "ts",
    "cli"
  ],
  "author": "zhangheng",
  "license": "MIT",
  "homepage": "https://github.com/hengtop",
  "repository": {
    "type": "git",
    "url": "https://github.com/hengtop/vue3-template"
  }
//...
}

然后发布。
```
npm publish
```
后续迭代，最好按照semver规范，然后重新发布。
npm采用语义化版本，共三位，以.隔开，从左至右依次代表：主版本（major）、次要版本（minor）、补丁版本（patch）。
根据需要执行命令：
```
# 当前版本为 1.0.0
# 1.0.0 --> 1.0.1
npm version patch

# 1.0.0  --> 1.1.0
npm version minor

# 1.0.0 --> 2.0.0
npm version major 
```
上述命令只是修改了package.json的版本号，之后还需要执行发布命令，完成迭代。
如果需要废弃这个包，当然还能下载包只是下载时会有警告。
```
npm deprecate
```
删除发布的包，不能下载使用。
```
npm unpublish
```

开发npm工具