怎么使用node搭建一个前端的私有脚手架Cli

前言

在搭建一个企业私有的 npm 私有库服务中，我梳理了怎么快速实现一个企业私有的 npm 私有库，文章内容写的不是很详细，只做到了领进门的效果。

有了 npm 私有库做前提，这次我们就可以实现企业内部自己的 cli 了，实现效果像什么 vue-cli、create-react-app、@ant-design/pro-cli 等。（当然 npm 私有库不是必须的，可以发布到公有的 npm 库，但是公有的 npm 如果使用域是需要收费的，例如@ant-design/xxx，所以需要一个特殊的名字）

如果不知道为什么需要实现企业私有的 cli，那么这篇文章可能暂时还不适合阅读。

项目地址

https://github.com/Lands-1203/cli

实现思路

该项目是一个纯 nodejs 项目，不涉及三方框架

package.json

{
  "name": "@huize/cli",
  "version": "0.0.1",
  "description": "@huize/cli 脚手架",
  "bin": {
    "huize-cli": "./src/index.js"
  },
  "main": "src/index.js",
  "scripts": {
    "test": "npx ts-node ./src/index.ts create",
    "build": "tsc --build",
    "prepublishOnly": "npm run build"
  },
  "author": {
    "name": "兰涛",
    "email": "xxxxx@xx.com"
  },
  "publishConfig": {
    "registry": "http://xx.xx.xx.x:4873/"
  },
  "files": [
    "src"
  ],
  "engines": {
    "node": ">=8.9"
  },
  "license": "ISC",
  "dependencies": {
    "@inquirer/prompts": "^2.2.0",
    "chalk": "^2.4.2",
    "commander": "^8.3.0",
    "execa": "^2.0.4",
    "fs-extra": "^10.0.0",
    "glob": "^10.3.1",
    "path": "^0.12.7",
    "prettier": "^2.8.8"
  },
  "devDependencies": {
    "@types/fs-extra": "^11.0.1",
    "@types/prettier": "^2.7.3",
    "ts-loader": "^9.4.4",
    "ts-node": "^10.9.1",
    "typescript": "^5.1.6"
  }
}

功能调用原理

使用npm i -g @huize/cli全局安装该项目后，npm 会帮助我们做两件事情：

会在F:\nodejs\node_global\node_modules@xxxj保存项目文件，文件内容是files字段中指定的，files中应该设置执行中需要调用的文件。
F:\nodejs\node_global会保存执行命令，该执行命令是通过package.json 中bin对象指定的入口文件。入口文件顶部的#!/usr/bin/env node是告诉系统使用 nodejs 执行当前文件。

所以我们全局安装@huize/cli后，执行huize-cli xxx 就会进入使用node调用 src/index.js(为什么不是 src/index.ts 后面会提到)

工具包介绍

包名	作用
commander	如果我们把 bin 下面的命令 huize-cli 称作一级命令，该命令是创建给系统识别的，那么commander 工具包会创建对应的子命令和参数，使用该工具包就可以得到用户的子命令（create）、参数等。以及可以创建该命令的描述：例如`huize-cli help` 、`huize-cli create --help` 。具体使用方式，见官方文档
@inquirer/prompts	它是一个用于在命令行端与用户交互的工具包，在使用commander 得到用户命令和参数后，我们接下来就需要对用户进行一些提问，比如项目名称是什么、版本等信息。该工具包支持输入、选择、确认等基本交互
glob	查文件的，在该项目中主要是用于查询当前命令行路径下的所有文件名称，避免冲突。
execa	这是一个用于创建 cmd 执行命令的工具。在该项目中主要担任执行 git 克隆和`pnpm i`包下载。
path	拼接系统中的绝对路径，由于 windows 和 ios 的路径规则不一样，它就能很好的解决这个问题。
fs-extra	读写文件。在该项目中，主要用于读取 clone 项目的 package.json，修改其 name 属性等。

相信我把工具包介绍清楚后，各位读者都能很清晰的了解到是怎么实现的一个 cli 了。

scripts 脚本和

{
...,
  "scripts": {
    "test": "npx ts-node ./src/index.ts create",
    "build": "tsc --build",
    "prepublishOnly": "npm run build"
  },
...
 "publishConfig": {
    "registry": "http://xx.xx.xx.x:4873/"
  },
}

命令/字段	作用
test	用于开发阶段测试使用。
build	将 ts 文件转换成 js 文件
prepublishOnly	执行`npm publish`是会自动调用，是`publish`的一个钩子
publishConfig	指定`publish`时候的一些配置，该项目制定了发布的地址

如何使用

将项目发布到了企业私有库后，我们需要配置 npm 全局设置，如果项目中指定的 clone 项目是企业私有的 git，还需要在 cmd 中登录 git 或设置 ssh。

设置全局 npm

npm config set --global @huize:registry=``http://xxx.xx.xx.xx:4873

全局安装 cli

npm install @huize/cli -g

使用命令创建项目

huize-cli create [projectName]

QA：

(1). 为什么 bin 命令下的指定的是 index.js，而不是 index.ts?

A：由于我们使用的是 ts 编写的项目，所以我们的执行npm run test的时候使用的是 ts-node 执行的入口文件，但是当我们将项目发布后，我们在系统上执行需要使用 node 环境，并不是所有人都有 ts-node 环境，所有在发布的时候会自动执行npm run prepublishOnly将 ts 编译成 js，这个时候指定 index.js 文件就是理所当然的。

(2). 在开发过程中怎么调试？

A: 我给上几张图大家就明白了。当然所有 node 项目都可以这样调试。