【课程简介】
在前端开发中经常会用到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": {