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

前言

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

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

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

项目地址：

github.com/Lands-1203/…

实现思路

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

package.json

{
  "name": "@huize/react-template-cli",
  "version": "0.0.1",
  "description": "@xxxxx/react-template-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/react-template-cli全局安装该项目后，npm会帮助我们做两件事情：

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

所有我们全局安装@huize/react-template-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。

1. 设置全局 npm

npm config set --global @huize:registry=``http://123.56.117.8:4873

1. 全局安装 cli

npm install @huize/react-template-cli -g

1. 使用命令创建项目

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项目都可以这样调试。

注： 下一章介绍怎么快速搭建一个企业的私有组件库项目和完成的项目组件文档