实现一个前端脚手架原理

前提：所使用到的第三方库

• Commander[1] 完整的node命令行解决方。当然也可以使用yargs[2]，yargs功能更多一些。
• Chalk[3] 能给shell命令行的文字添加样式，简单来说就是拿来画画的，可要可不要。
• fs-extra[4] 操作文件的，比之node自带的fs，这个会更加强大与完善些。
• inquirer[5] 在shell命令行中提供交互的库，具体效果看下文的演示。
• ora[6] 在shell命令行中展示loading效果
• download-git-repo[7] 下载git仓库。

步骤一：指定执行的文件

• 先创建一个项目 执行npm init -y
• 创建一个bin文件夹，添加index.js文件，在这个文件中写下#! /usr/bin/env node
• • 执行 npm link 命令，链接到本地环境中 npm link （只有本地开发需要执行这一步，正常脚手架全局安装无需执行此步骤）Link 相当于将当前本地模块链接到npm目录下，这个目录可以直接访问，所以当前包就能直接访问了。默认package.json的name为基准，也可以通过bin配置别名。link完后，npm会自动帮忙生成命令，之后可以直接执行cli xxx。

步骤二：配置可执行命令

• 直接在bin/index.js下配置create命令。直接贴代码了，里面涉及到的都是第三方库的api，不了解的先查下文档较好。

步骤三：完善核心命令---create命令

上面的步骤都只是一个脚手架最基本的铺垫，而create命令才是最关键的，而这最核心的create命令都应该做些什么事情呢？

这里就要聊聊脚手架的本质了，脚手架的本质无非就是我们先在一个仓库里写好一个模板项目，然后脚手架每次运行的时候都把这个模板项目拉到目标项目中，脚手架不过是省去了我们拉代码，初始化项目的操作而已。那么现在，create命令的基本流程就是这样了。 此文章为9月Day05学习笔记，内容来源于极客时间《重学前端》，强烈推荐该课程！