当前位置：首页 > news >正文

开发一个简单的脚手架

news 2026/5/12 16:07:15

脚手架的作用：前端脚手架本质是项目快速生成 + 规范 + 工具集成的一套启动模板，可以提高开发效率

脚手架的核心依赖：

commander：解析终端命令

inquirer:：提供交互式问答，收集用户配置

fs-extra：文件操作（创建文件夹，文件等）

ora：美化终端loding动画

chalk：给文字上色

目录结构：

bin/index.js：脚⼿架终端命令入口

#!/usr/bin/env node import '../src/main.js'

#!/usr/bin/env node ：shebang指令，告诉系统使⽤Node.js执⾏该⽂件，必须写在第⼀⾏，否则脚⼿架命令⽆法运⾏

package.json：项目配置、依赖、命令声明

{ "name": "my-vue-cli", "version": "1.0.0", "main": "index.js", "type": "module", "bin": "./bin/index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "description": "", "dependencies": { "chalk": "^5.6.2", "commander": "^14.0.3", "fs-extra": "^11.3.4", "inquirer": "^13.3.0", "ora": "^9.3.0" } }

注意要添加:

"bin": "./bin/index.js"：注册全局终端命令my-vue-cli ，指定命令入口文件为./bin/cli.js

"type": "module"：声明项⽬采⽤ESM模块化规范，使⽤import/export 替代 require/module.exports

src/main.js：脚⼿架程序主入口

import { Command } from 'commander/esm.mjs' import { registerCreate } from './commands/create.js' const program = new Command() // 定义 cli 基础信息 program .version('1.0.0') .name('vue3-ts-cli') .description('vue3+ts+vite的前端脚手架') registerCreate(program) program.parse(process.argv)

说明:

1. 初始化commander 程序实例，配置脚⼿架版本（ my-cli -V/--version 可查看）

2. 注册create 核心命令，将命令逻辑解耦到comma

查看全文

http://www.jsqmd.com/news/478682/