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

【课程简介】

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

【主讲内容】

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

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

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

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

为什么需要脚手架？

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

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

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

1.运行命令创建项目

➜ npm create vue@latest

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

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

通过分析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并查看控制台输出

相关依赖

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