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

最新推荐文章于 2025-10-10 21:14:13 发布

原创最新推荐文章于 2025-10-10 21:14:13 发布 · 559 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端脚手架

javascript 专栏收录该内容

16 篇文章

订阅专栏

这篇博客介绍了如何开发一个命令行工具（CLI），该工具具有问询功能，可以根据用户输入定制化信息，并从远程仓库下载模板来创建项目。主要涉及的技术包括Commander用于命令解析，Inquirer进行用户交互，download-git-repo下载模板，fs-extra处理文件操作，以及mem-fs和mem-fs-editor用于模板赋值和内容嵌入。此外，还使用了chalk和ora提升命令行界面的用户体验。完成开发后，通过npm打包发布并进行调试。

需要的功能

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

核心原理

一、本质是从远程仓库把不同的模板拉取到本地。
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