封装一个自己的前端脚手架cli工具（一）

原创

已于 2022-09-01 14:19:37 修改 · 1.7k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #cli

于 2022-08-30 15:57:04 首次发布

本文介绍了一个自定义前端CLI工具的创建过程，包括项目结构搭建、命令编写、模板内容修改等功能实现。

封装一个自己的前端脚手架cli工具

一、创建 cli 项目

1.创建一个文件夹存放 cli 项目文件

给这个 cli 文件夹取名（这里我们取名mycli），cd 到 cli文件夹中，使用 npm init 简单的创建一个项目结构。创建 bin 文件夹，添加启动文件 cli.js，这个文件主要写 Commander.js 的命令。

mycli
|— bin
	|— cli.js
|— README.md
|— package.json
|— node_modules
|— .gitignore

2.编辑 `package.json` 文件

补充版本、启动入口、作者、规范等（如果要发 npm 包，需要再配置一下keywords、repository、homepage）

{
   
   
  "name": "mycli",
  "version": "1.0.0",
  "description": "脚手架",
  "main": "index.js",
  "bin": {
   
   
    "mycli": "./bin/cli.js"
  },
  "scripts": {
   
   
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": {
   
   
    "name": "ShayCormac"
  },
  "license": "MIT",
  "keywords": ["mycli"],
  "repository": "git@gitee.com:shay_cormac/mycli.git",
  "homepage": "git@gitee.com:shay_cormac/mycli.git"
}

3.创建本地调试链接

在mycli项目文件夹使用 yarn link 命令创建链接。在需要使用mycli的其他文件夹是用命令 yarn link mycli 进行本地依赖链接。

需要断开链接时，先在目标文件夹使用 yarn unlink mycli 命令，即可断开本地依赖。需要关闭mycli项目的链接，可以在 mycli 文件夹中使用 yarn unlink 命令关闭。

接下来则进行cli命令的编写（注意：在 cli.js 文件开头要加上识别 #! /usr/bin/env node）

二、编写脚手架cli命令

1.编写命令

我们使用 Commander.js 插件来完成命令的编写。首先安装 Command.js

$ npm install commander

然后就可以进行命令的编写了

#! /usr/bin/env node

const {
   
   Command} = require('commander');

const program = new Command()

// 定义创建项目
program
.command('create <projectName>')
.description('create a new project, 创建一个新项目')
.option('-f, --force', '如果创建的目录存在则直接覆盖')
.action((name, option) => {
   
   
    // 打印结果，输出用户手动输入的项目名字 
    console.log('name:',name, 'option:', option)
})


// 配置版本信息
program
.version(`v${
     
     require('../package.json').version}`)
.description('使用说明')
.usage('<command> [option]')


// 解析用户执行命令传入参数
program.parse(process.argv)

输出可以拿到

> mycli create projectname123
name: projectname123 option: {
   
   }		// 执行结果

> mycli create projectname123 -f
name: projectname123 option: {
   
    force: true }	// 执行结果

> mycli create projectname123 --force
name: projectname123 option: {
   
    force: true }	// 执行结果

2.编写 create 逻辑

在跟目录下创建 lib 文件夹，cd 到 lib 文件夹中，创建 create.js 文件

mycli
|— bin
	|— cli.js
|— lib
	|— create.js
|— README.md
|— package.json
|— node_modules
|— .gitignore

在 create.js 文件中接收上一步的值

module.exports = async function (name, options) {
   
   
    // 验证是否正常取到值
    console.log('create success:', name, options);
}

在 bin/cli.js 中使用 create.js

// 定义创建项目
program
.command('create <projectName>')
.description('create a new project, 创建一个新项目')
.option('-f, --force', '如果创建的目录存在则直接覆盖')
.action((name, option) => {
   
   
    // 引入create.js 模块并传递参数
    require('../lib/create')(name, option)
})

> mycli create projectname123 -f
create success: projectname123 {
   
    force: true }	// 执行结果

在拿到用户提供的答案后，我们需要判断当前目录下是否已有同名文件夹，如果已有同名文件夹，那么需要进行什么样的操作（删除已有、替换、取消…）。这里我们需要两个依赖，一个是询问用户的依赖 inquirer，一个是对文件、文件夹的操作 node.js 的 fs 模块，对于 fs 模块的使用，我们知道稍微有点不方便，这里我们使用 fs-extra 依赖，它是 fs 模块的扩展。

先安装这两个依赖

$ npm install fs-extra

$ npm install inquirer

在 lib/create.js 文件中开始写逻辑

const path = require('path');
const extra = require('fs-extra');  // fs-extra 是 node fs 的扩展
const inquirer = require('inquirer');  // 命令行交互

module.exports = async function (name, options) {
   
   
    // 验证是否正常取到值
    // console.log('create success', name, options);
    const cwd = process.cwd(); // 执行目录
    const targetAir = path.join(cwd, name); // 需要创建的目录地址
    // 判断目录是否已经存在？
    if (extra.existsSync(targetAir)) {
   
   
        // 是否为强制创建？
        if (options.force) {
   
   
            await extra.remove(targetAir)
            // TODO
        }
        else {