从0到1学会开发前端脚手架

- 日理万妓 2024-03-30 10:44 153阅读 0赞

【课程简介】

在前端开发中经常会用到create-vue, create-react-app这类脚手架，它可以帮助我们快速生成一个配置化的项目，提高开发效率。现在很多大厂都有自己研发的脚手架，掌握脚手架的使用，并且自己能开发脚手架，能够让大家前端之路走得更远。本次课程将会解析脚手架实现原理，从0到1实现一个前端脚手架，让大家轻松掌握！

【主讲内容】

1. 脚手架实现原理思路解析

2.命令行开发常用第三方模块

3.从0到1码出一个前端脚手架

【教程推荐】[从0到1开发前端脚手架][0_1]

为什么需要脚手架？

脚手架本质就是一个工具，作用是能够让使用者专注于写代码，它可以让我们只用一个命令就生成一个已经配置好的项目，而不用我们再花时间去配置和安装相关依赖，可以在很大程度上提升我们的开发效率。比如我们常用的`create-vue`和`create-react-app`就是脚手架，很多大厂也都有自己的脚手架。

一个脚手架应该具备哪些功能？

我们以vue官方的脚手架`create-vue`为例来分析下一个脚手架应该具备哪些功能？

1.运行命令创建项目

➜ npm create vue@latest

2.用户根据自己需要选择一些配置项

![7e9b1a03be334951927b454fe00cd8a0.png][]

3.根据选择的配置项会生成一个模版项目

![be930f8fead342f9abd2d1cc763e8fec.png][]

通过分析`create-vue`，我们可以知道，一个脚手架如果想要创建一个项目，最少要有以下两点功能：

1.可以通过命令行和用户交互

2.根据交互的结果去生成对应的模版项目

#### 脚手架实现 ####

初始化项目

1.执行如下初始化命令

➜ mkdir kfc-vme50  
➜ cd kfc-vme50  
➜ npm init -y

2.在根目录下创建`bin/index.js`文件作为入口文件，并添加如下代码

\#!/usr/bin/env node  
console.log('肯德基疯狂星期四v我50')

3.在package.json中添加bin字段

"bin": \{  
"kfc-vme50": "/bin/index.js"  
\}

4.在根目录下执行`npm link`将项目链接到本地环境，就可以实现`kfc-vme50`命令全局调用

5.运行`kfc-vme50`并查看控制台输出

![36e956c7a87541009562e7dc8853a204.png][]

相关依赖

实现一个脚手架，通常会用到以下依赖包

[commander][]：命令行处理工具

[chalk][]：命令行输出美化工具

[inquirer][]：命令行交互工具

[ora][]：终端loading美化工具

[git-clone][]：下·载项目模版工具

[figlet][]：终端生成艺术字

[fs-extra][]：用来操作本地目录

**talk is cheap, show me the code**

**\#!/usr/bin/env node  
const inquirer = require('inquirer');  
const \{ program \} = require('commander');  
const figlet = require('figlet');  
const fs = require('fs-extra');  
const path = require('path');  
const chalk = require('chalk');  
const gitClone = require('git-clone');  
const ora = require('ora');**

**const projectList = \{  
'vue': 'git@github.com:kfc-vme50/vue-template.git',  
'react': 'git@github.com:kfc-vme50/react-template.git',  
'react&ts': 'git@github.com:kfc-vme50/react-template-ts.git',  
'vue&ts': 'git@github.com:kfc-vme50/vue-template-ts.git',  
\}**

**// 修改帮助信息的首行展示  
program.usage('<command> \[options\]')  
// 版本号  
program.version(\`v$\{require('../package.json').version\}\`)  
// 艺术字展示  
program.on('--help', function () \{  
console.log(  
figlet.textSync('kfc vme50', \{  
font: 'Ghost',  
horizontalLayout: 'default',  
verticalLayout: 'default',  
width: 100,  
whitespaceBreak: true  
\})  
)  
\});**

**// 创建项目的命令  
program  
.command('create <app-name>')  
.description('创建新项目')  
.option('-f, --force', '如果创建的目录存在则强制删除')  
.action(async function (name, option) \{  
const cwd = process.cwd();  
const targetPath = path.join(cwd, name);  
// 如果文件夹存在  
if (fs.existsSync(targetPath)) \{  
if (option.force) \{  
fs.remove(targetPath)  
\} else \{  
const res = await inquirer.prompt(\[  
\{  
name: 'action',  
type: 'list',  
message: '是否覆盖已有文件夹？',  
choices: \[  
\{  
name: 'YES',  
value: true  
\},  
\{  
name: 'NO',  
value: false  
\}  
\]  
\}  
\])  
if (!res.action) \{  
return;  
\} else \{  
fs.remove(targetPath)  
console.log(chalk.red('已删除之前的文件夹'))  
\}  
\}  
\}**

**const res = await inquirer.prompt(\[  
\{  
name: 'type',  
type: 'list',  
message: '请选择使用的框架',  
choices: \[  
\{  
name: 'Vue',  
value: 'vue'  
\},  
\{  
name: 'React',  
value: 'react'  
\}  
\]  
\},  
\{  
name: 'ts',  
type: 'list',  
message: '是否使用ts项目',  
choices: \[  
\{  
name: 'YES',  
value: true  
\},  
\{  
name: 'NO',  
value: false  
\}  
\]  
\}  
\])  
const rep = res.type + (res.ts ? '&ts' : '');  
// 拉取项目模板  
const spinner = ora('正在加载项目模板...').start();  
gitClone(  
projectList\[rep\],  
targetPath,  
\{  
checkout: 'main'  
\},  
(err) => \{  
if (!err) \{  
fs.remove(path.resolve(targetPath, '.git'));  
spinner.succeed('项目模板加载完成！');  
console.log('now run:')  
console.log(chalk.green(\`\\n cd $\{name\}\`))  
console.log(chalk.green(' npm install'))  
console.log(chalk.green(\` npm run $\{res.type === 'react' ? 'start' : 'dev'\}\\n\`))  
\} else \{  
spinner.fail(chalk.red('项目模板加载失败，请重新获取！'));  
\}  
\}  
)  
\})**

**program.parse(process.argv)**

**发布**

1.注册npm账号

2.在本地登录并发布

\# 登录刚注册的账号  
➜ npm login  
Username: 用户名  
Password: 密码  
Email: 注册邮箱  
Enter one-time password: 一次性密码 邮箱会收到邮件

\# 在我们脚手架的根目录下执行发布命令  
➜ npm publish

**注意：**

1.登录和发包前一定要先查看npm的源，需要修改为`https://registry.npmjs.org/`

2.在发布时包名不能重复，所以可以先在线上搜索下看看有没有存在的包，如果出现403错误可能是包名和线上的包重复了，修改package.json中的name即可

[0_1]: http://yun.itheima.com/open/834.html
[7e9b1a03be334951927b454fe00cd8a0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/8345c6a3c7fc4a779913638c23f76689.png
[be930f8fead342f9abd2d1cc763e8fec.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/6e424535483e431b995a69e0125ed5dc.png
[36e956c7a87541009562e7dc8853a204.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/61570075742149b2af5eb8b6048998c5.png
[commander]: https://github.com/tj/commander.js
[chalk]: https://github.com/chalk/chalk
[inquirer]: https://github.com/SBoudrias/Inquirer.js
[ora]: https://github.com/sindresorhus/ora
[git-clone]: https://github.com/jaz303/git-clone
[figlet]: https://github.com/patorjk/figlet.js
[fs-extra]: https://github.com/jprichardson/node-fs-extra