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

需要的功能

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

核心原理

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值