从零开始搭建前端脚手架搭建

it2025-11-27  8

需要的功能

一、具备问询功能,可以获取定制化信息。 二、根据问询结果,以不同模板去创建项目。

核心原理

一、本质是从远程仓库把不同的模板拉取到本地。 1、模板是一个完整的项目,包含项目的完整结构和信息 二、cli下载项目时,复制项目的同时,将问询得到的定制化信息写入项目配置

准备工作

一、注册npm

cli的编写

项目目录

|— bin | |- begin |— src | |- add.js |— .gitignore |— .npmrc |— README.md |— package.json |— templates.json

依赖及其作用

一、package.json

"dependencies": { "chalk": "^4.1.0", "child_process": "^1.0.2", "commander": "^6.1.0", "download-git-repo": "^3.0.2", "fs-extra": "^9.0.1", "inquirer": "^7.3.3", "mem-fs": "^1.2.0", "mem-fs-editor": "^7.0.1", "ora": "^5.1.0" }

1、实现功能 commander:负责读取命令 inquire:负责问询 download-git-repo:负责下载对应模板项目的git仓库 fs-extra:负责文件的复制 mem-fs mem-fs-editor:负责模板的赋值以及嵌入模板字符串,它需要依赖mem-fs child-process: 负责执行命令行 2、更好的交互体验 chalk:改变命令行输出样式 ora:优雅的命令行交互spinner

解析命令

问询

下载git仓库

复制文件,将信息写入模板

调试发布

调试

一、必须要打成全局包才可以使用pacakge.json中的bin中的命令 二、打成全局包 1、npm install . -g 2、npm link 三、命令行输入cra-cli

发布

npm publish

最新回复(0)