# 脚手架搭建

# 前提技术储备

  • NodeJS 环境
  • npm 命令基础使用
  • 了解 vue/cli 使用

# 前置知识

shell: 命令行解释器的统称, 功能：提供基本命令解释和执行功能

bash: Shell 的一种具体实现, 功能: 在 Shell 基础上增强功能

cli: Command Line Interface 命令行界面

# 啥是脚手架

使用 命令行 来控制系统执行某些操作

node、python、rust 皆可做脚手架

比如：@vue/cli 创建 vue 基础项目

执行流程

（node环境）
脚手架的执行原理如下:
- 在终端输入 vue create vue-test-app
- 终端解析出 vue 命令
- 终端在环境变量（node的bin中）中找到 vue 命令
- 终端根据 vue 命令链接到实际文件 vue.js
- 终端利用 node 执行 vue.js
- vue.js 解析command/options
- vue.js 执行command
- 执行完毕，退出执行
1
2
3
4
5
6
7
8
9
10

# 从应用的角度看如何开发一个脚手架

这里以 vue-cli 为例

  • 开发一个 npm 项目，该项目中应包含一个 bin/vue.js 文件，并将这个项目发布到 npm

  • 将该 npm 项目安装到 node 的 lib/node_modules

  • 在 node 的 bin 目录下配置 vue 软链接指向 lib/node modules/@vue/cli/bin/vue.js 这样我们在执行 vue 命令的时候就可以找到 vue.js 进行执行

# 构建脚手架的工具库

# 命令交互库

  • Commander(本文教程采用) https://commander.nodejs.cn/

    • 案例
      • vue/cli
      • webpack/cli
      • create-react-app

  • 其他竞品

    • Yargs https://yargs.js.org/
    • Oclif https://www.npmjs.com/package/oclif

# 其他工具库

  • chalk（终端字符颜色&字体控制） https://www.npmjs.com/package/chalk

    • chalk-cli 终端命令使用 chalk

  • ora（终端 loading 状态展示） https://www.npmjs.com/package/ora

  • inquirer (表单式交互命令行集合库) https://www.npmjs.com/package/inquirer

    • readline

# 其他

# 如何搭建一个简单的脚手架--教程