如何创建一个属于自己的脚手架，并发布到NPM（简易版）

小学同学
755 阅读5分钟

概述

什么是脚手架，它具有哪些能力？

  1. 具有全局命令行指令
  2. 能够提供交互进行相关配置
  3. 可以生成一些模板目录和文件

通俗来说我们一般把脚手架想象成它可以快速帮助我们生成一些预设的模板代码，可以让我们快速的进行项目开发，提升项目初始化搭建的流程。

拿vite举个例子

  1. vite内置脚手架给我们提供了一个全局命令vite，我们可以通过npm init vite@latest命令创建一个vite工程
  2. vite脚手架还提供了用户交户对可对项目进行的配置，例如可以让我们选择不同的框架等信息，如下图： image.png
  3. 当我们配置好相关参数后，最后vite脚手架会帮我们生成对应配置的项目模板，如下图： image.png

正片开始

一、创建一个属于自己的全局命令

1. 在本地新建一个目录，用于存放自定义脚手架的源文件

2. 在根目录创建一个bin目录，并在并目录下创建一个cli.js文件，最后在该文件的头部添加#! /usr/bin/env node

image.png

3. 在项目根目录下执行npm init，初始化node工程后再执行npm link将你的包挂载到全局。

4. 接下来就可以在全局任意地方使用你自定义的命令啦！（图1）一般来说这个全局自定义命令就是你的自定义脚手架包名，当然也可以在package.json文件中查看或修改bin下的key值（图2）

image.pngimage.png

通过使用 npm link，你可以在不发布包到 npm 仓库的情况下，在本地项目中实时使用和测试你的包。

二、使用commander处理全局命令参数

commander是npm中的一个第三方包，它的作用就是能帮我们处理步骤一中自定义全局命令的参数

详细的使用说明可参考官网：www.npmjs.com/package/com…

1. 使用npm install commander安装它

2. 回到/bin/cli.js文件，引入commander，并调用它所提供的api来处理自定义全局命令的参数，详细见下方🌰

#! /usr/bin/env node
import { program } from 'commander'

program
  // 提供一个create命令，接受一个projectName参数，options参数
  .command('create <project-name> [options...]') // <>表示必填，[]表示选填
  // 命令的描述信息
  .description('创建项目')
  // 命令的执行函数，参数为一个回调函数
  .action((projectName, options) => {
    console.log(projectName, options)
  })

// 解析命令行参数
program.parse(process.argv)

3. 设置好脚本后，我们就可以在全局中执行demo-mycli create <project-name> [options...]命令了，然后我们就可以看到在program.action的回调中打印了projectName, options。

image.png

三、使用inquirer处理用户交互

用户可能有时候需要自定义一些配置，这时候我们就可以用到这个第三方库inquirer，它可以方便的帮助我们提示和接受用户的配置

详细的使用说明可参考官网：www.npmjs.com/package/inq…

1. 使用npm install inquirer安装它

2. 改写/bin/cli.js文件，引入inquirer，并调用它所提供的apiprompt来处理用户交互数据，详细见下方🌰

#! /usr/bin/env node
import { program } from 'commander'
#! /usr/bin/env node
import { program } from 'commander'
import inquirer from 'inquirer'

program
  // 提供一个create命令，接受一个projectName参数，options参数
  .command('create <project-name> [options...]')
  // 命令的描述信息
  .description('创建项目')
  // 命令的执行函数
  .action(async (projectName, options) => {
    const answers = await inquirer.prompt([
      {
        type: 'list',
        name: 'projectType',
        message: '请选择项目类型',
        choices: ['express', 'koa', 'egg'],
      },
    ])
    console.log(answers)
  })

// 解析命令行参数
program.parse(process.argv)

3. 设置好脚本后，我们继续在全局中执行demo-mycli create <project-name> 命令，然后我们可以在控制太看到如下提示和结果

image.png

四、使用download-git-repo下载远程仓库模板目录和文件

通过步骤三，我们已经可以和用户交互，让用户选择对应的框架了，那么接下来我们就需要根据用户的选择来下载对应的模板目录和文件。

所以这里介绍一个第三方库download-git-repo，它可以帮助我们下载远程仓库代码

详细的使用说明可参考官网：www.npmjs.com/package/dow…

1. 使用npm install download-git-repo安装它

2. 改写/bin/cli.js文件，引入download-git-repo，并调用引入返回的函数来下载远程仓库模板，详细见下方🌰

#! /usr/bin/env node
import { program } from 'commander'
import inquirer from 'inquirer'
import download from 'download-git-repo'

program
  // 提供一个create命令，接受一个projectName参数，options参数
  .command('create <project-name> [options...]')
  // 命令的描述信息
  .description('创建项目')
  // 命令的执行函数
  .action(async (projectName, options) => {
    const answers = await inquirer.prompt([
      {
        type: 'list',
        name: 'projectType',
        message: '请选择项目类型',
        choices: ['express', 'koa', 'egg']
      }
    ])
    // 注意⚠️：这个的判断和download地址是根据你个人的需求而定制
    if (answers.projectType === 'express') {
      download('github:xxx.git', projectName, { clone: true }, (err) => {
        console.log(err)
      })
    }
  })
// 解析命令行参数
program.parse(process.argv)

3. 设置好脚本后，我们继续在全局中执行demo-mycli create <project-name> 命令，然后我们选择对应的框架模板，最终就能够成功从远程仓库下载到我们的模板代码了。

额外扩展第三方库：

ora：下载等待提示交互。具体使用参考：www.npmjs.com/package/ora

chalk：设置命令行样式。具体使用参考：www.npmjs.com/package/cha…

五、将自定义的脚手架发布到NPM中

  1. 在npm官网中注册一个账号（已有账号可忽略）
  2. 检查本地的npm源必须是官方源(npm config get registry ｜ npm config set registry https://registry.npmjs.org/)，不能为淘宝镜像。 image.png
  3. 需要发布包的终端目录使用npm login登录npm，账号密码为步骤1注册的账号和密码
  4. 检查package.json文件的name字段值不能为npm仓库中已存在库的名字，否则执行会报错
  5. 一切准备就绪后，就可以执行npm publish，然后我们的自定义脚手架就成功发布到npm啦，最后别人或自己就可以在终端中通过npm install -g xxx下载我们自定义的脚手架进行使用了
avatar
文章
阅读
粉丝