一.完成脚手架的基本结构

1.什么是脚手架

脚手架是一类快速形成工程化目录的工具,简单来说就是帮你减少"为重复性工作而做的重复性工作"的工具。

基于vue-cli、vite等日常使用过的脚手架,可知脚手架一般都具有以下功能点:

  • 有不同的命令执行操作,比如:
ini 复制代码
Commands:
  create [options] <app-name>
  add [options] <plugin> [pluginOptions]
  invoke [options] <plugin> [pluginOptions]
  inspect [options] [paths...]
  serve
  build
  ui [options]
  init [options] <template> <app-name>
  config [options] [value]
  outdated [options]
  upgrade [options] [plugin-name]
  migrate [options] [plugin-name]
  info
  help [command]
  • 可以通过命令行交互执行问答列表
sql 复制代码
? Please pick a preset:
❯ Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features
  • 最终根据用户的问答结果生成对应的文件

2.需要使用的工具库

在完善构建脚手架前,需要引入一些脚手架构建中必须使用到的工具库。

  • commander 可以自定义一些命令行指令,输入自定义的命令行执行对应的操作
  • inquirer 可以在命令行询问问题,并记录回答结果
  • fs-extra 是fs的一个扩展,提供了非常多的便利API,并且继承了fs所有方法和为fs方法添加了promise的支持
  • chalk 可以美化终端的输出
  • figlet 可以在终端输出logo(可选)
  • ora 控制台的loading动画(可选)
  • download-git-repo 下载远程模板

3.实现过程

创建脚手架

新建一个文件夹,执行npm init生成package.json文件

csharp 复制代码
npm init -y

创建bin文件夹,bin文件夹存放命令程序的入口文件,并新建index.js文件

go 复制代码
mtr-cli   
├─ bin
│  ├─ index.js          
└─ package.json 

修改package.json文件,bin下面的mtrapp为快速启动命令

json 复制代码
{
  "name": "mtrpack-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "bin": {
    "mtrapp": "./mtr-cli/bin/index,js"
  }
}

修改入口文件index.js #! 开头代表这个文件被当做一个可执行文件,后面的 /usr/bin/env node 代表这个文件用node执行,node基于用户安装根目录下的环境变量重查找

javascript 复制代码
#! /usr/bin/env node
console.log("Hello, this is mtr-cli")

最后将当前命令链接到全局,即可测试是否正常

bash 复制代码
npm link

link 成功!ps: 报错的话如果是提示权限问题需要加上sudo,win的话选择用管理员模式打开终端 执行一下看看,结果正常,接下来就可以正式搭建脚手架的功能了

创建新的命令

引入commander.js,通过commanderjs可以添加一些脚手架命令,通过在命令行输入指令来进行一些操作

javascript 复制代码
program
  .name('Mtr-cli')
  .description('Weclome to Mtr-cli! This is a cli to create a project for kinds of front-end frameworks quickly.')
  .version('1.0.0')

program.command('create')
  .description('Create a new project.')
  .action(() => {
    getProjOptions()
  })

现在来尝试一下这两个命令。

第一个命令: 这是个默认命令,主要用于查看这个脚手架的一些用法。

第二个命令: 第二个命令执行以后会执行对应的action回调里的方法,这里是用来选择一些选项决定用什么样的框架。具体如何实现需要引入另一个工具库,接着往下看。

询问用户进行选项设置

vite这类脚手架在初始化项目的时候都会询问用户一些选项,进而快捷的提供一些预设模板。 这个功能的实现需要引入inquirer.js

接着通过inquirer的prompt来接收一些 用户输入的参数,用来设置你的项目具体使用哪些插件和框架

javascript 复制代码
module.exports = async function getProjOptions() {
  let framework = await inquirer.prompt(PROJECT_OPTIONS)
  if (!framework) {
    return
  } else {
    console.log(framework, 'options')                                                                                            
  }
}

const PROJECT_OPTIONS = [
  {
    name: 'name',
    type: 'input',
    default: 'my-project',
    messgae: 'Input the name of your project!',
  },
  {
    name: 'framework',
    type: 'list',
    messgae: 'Choose the framework of your project!',
    choices: [
      {
        name: 'vue2',
        value: '1'
      },
      {
        name: 'vue3',
        value: '2'
      },
      {
        name: 'react',
        value: '3'
      },
      {
        name: 'uni-app',
        value: '4'
      },
      {
        name: 'electron',
        value: '5'
      },
      {
        name: 'node-server',
        value: '6'
      }
    ]
  },
  {
    name: 'language',
    type: 'list',
    messgae: 'Typescript or javascript',
    choices: [
      {
        name: 'javascript',
        value: '1'
      },
      {
        name: 'typescript',
        value: '2'
      }
    ]
  },
  {
    name: 'eslint',
    type: 'list',
    messgae: 'Using eslint or not',
    choices: [
      {
        name: 'unable',
        value: '1'
      },
      {
        name: 'disable',
        value: '2'
      }
    ]
  }
]

通过这样的代码即可达到上一部分图中的效果。

美化一下控制台输出样式(不需要可以跳过这一步)

这个不是必须的,主要是用到了 chalkfiglet 这两个库。 示例代码如下:(chalk和figlet的具体使用方法可以参考这两个工具库的文档)

javascript 复制代码
const handleNoticeText = () => {
  console.log('\r\n' + chalk.whiteBright.bgBlueBright.bold(figlet.textSync('lsdmtrCli', {
    font: 'Standard',
    horizontalLayout: 'default',
    verticalLayout: 'default',
    width: 80,
    whitespaceBreak: true
  })))
  console.log(`\r\nRun ${chalk.cyanBright(`mtrapp <command> --help`)} for detailed usage of given command\r\n`)
}

program.on('--help', handleNoticeText())  

接下来在命令行中(windows下用git bash, win下vscode默认的终端是powershell会无法识别命令)执行 mtr create(我这里已经把index.js中的mtrapp改成mtr了),就可以看到效果了 这样我的脚手架基本的结构就有个雏形了,剩下是如何实现具体的逻辑让它真正能快速搭建出一个项目来

相关推荐
Boilermaker19924 分钟前
【Java EE】SpringIoC
前端·数据库·spring
中微子15 分钟前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上102430 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y1 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁1 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry1 小时前
Fetch 笔记
前端·javascript
拾光拾趣录1 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟1 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan1 小时前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson1 小时前
青苔漫染待客迟
前端·设计模式·架构