脚手架就是在启动的时候询问一些简单的问题，并且通过用户回答的结果去渲染对应的模板文件。
工作流程：
1.根据命令行交互询问用户问题
2.根据用户回答的结果生成文件
脚手架的简单雏形
步骤：1.创建文件夹
2.新建程序入口文件cli.js
3.npm init，然后在package.json中执行入口文件为cli.js : “main”, “bin”
4.打开cli.js编辑 前缀：#! /usr/bin/env node
5.npm link 链接到全局 ，会在node_mudule中生成该文件夹
6.完成，在命令行输入文件夹的名称就可以执行cli.js的代码了
7.通过inquirer.js工具库实现询问用户信息的功能
inquire.prompt([{type: ”, name: ”,message:”,default:”}]).then(ans => { // 打印输出结果})
8.生成对应文件：新建template文件夹，包含两个示例文件，html文件使用ejs语法<%= name %>
9.npm install ejs模板引擎，将用户输入的数据渲染到模板文件上
获取到模板文件目录：node的path方法：path.join()
获取控制台所在目录：process.cwd()
从模板目录中读取文件 node中的fs.readdir(目标地址，（err, files)=>{
使用ejs.renderFile获取模板文件，然后fs.writeFileSync生成ejs处理后的模板文件
})
10.完成
热门脚手架工具库
commander：命令行自定义指令
commander.version(”).command(‘create <name>’).description(”).action(name=>{})
commander.parse()
npm link到全局
inquirer：询问用户问题，记录回答结果
chalk：控制台输出内容美化
ora：loading样式
download-git-repo：下载远程模板
githhub提供了接口获取模板及版本信息,axios请求接口获取,
对download-git-repo进行promise化改造
cross-spawn：支持跨平台调用系统上的命令，脚手架上可以用来自动执行shell命令
const dependencies = [‘vue’,’vuex’,’vue-router’]
spawn(‘npm’,[‘install’, ‘-D’].concat(dependencies )),{stdio:’inherit’}
ds-extra：fs的扩展工具，支持promise
figlet：整个logo
搭建自己的脚手架
实现功能：
1.通过 zr create <name> 命令启动项目 2.询问用户需要选择需要下载的模板 3.远程拉取模板文件
步骤：
1.创建项目 2.创建脚手架启动命令（使用 commander） 3.询问用户问题获取创建所需信息（使用 inquirer） 4.下载远程模板（使用 download-git-repo） 5.发布项目 npm publish 更新的时候注意版本号
yeoman 一个通用的脚手架工具
实际是三个工具的总和：1.yo脚手架，自动生成工具；2.gulp，grunt构建工具；bower，npm包管理工具
使用：
1.安装yo，安装对应的generator，eg：generator-node，generator-vue，generator-webapp…
2.yo node 运行generator-node快速搭建一个node项目
自定义Generator
实际上就是创建一个特定结构的npm包，
步骤
1.创建项目并初始化
注意：格式必须是generator-<name>格式，keyword中必须包含yeoman-generator，files要指向项目的模板目录
2.安装yeoman-generator
3.npm link到全局
4.使用generator提供的fs模块往目录中写入文件
yo支持ejs模板
5.交互式询问：使用Generator提供的Promting处理命令行的交互
plop：小而美的脚手架工具
建议：约定组件规范：eg：1.组件名驼峰；2.样式需要单独拎出；3.需要搭配说明文档
适合创建一些重复性的组件
过程：
- 安装 plop，新增配置文件 plopfile.js
- 编辑 plop 配置文件
- 创建模板文件
- 执行创建任务，在scripts中增加一条命令 “plop: ‘plop'”
搞了好久终于在掘金一个博主保姆式的教程中弄明白了，一步一步创建了属于自己的脚手架，感谢大佬
链接：https://juejin.cn/post/6966119324478079007
从 0 构建自己的脚手架/CLI知识体系（万字）
原创文章，作者：站长，如若转载，请注明出处：https://wsppx.cn/1065/%e7%bd%91%e7%bb%9c%e5%bc%80%e5%8f%91/%e5%89%8d%e7%ab%af/
微信扫一扫
相关推荐
-
前端学习记录之三：手写Promise源码
一、初始化版本 1.Promise 就是一个类 在执行这个类的时候 需要传递一个（回调函数）执行器进去 执行器立即执行 2.Promise有三种状态 fulfilled rejec…
-
前端面试题—平安前端面试题
1.mixin混入，以后自身生命周期和混入周期的具体实现，mixin的具体实现 定义：分发vue中可复用的功能，本质是一个js对象，它可以包含我们组件中任意功能选项，如data、c…
-
前端学习记录之二：异步编程
ps：只是针对看的某个课程做的一个简短笔记，方便后续自身复习，有时候逻辑或者板书并不是那么清晰，知识面可能也不全。有合适的机会后面会根据自己看的书籍、资料等完善和补充完善细节。 概…
-
前端面试题：Http code 301和 302区别
总结：301是永久跳转并且有缓存，而302是临时跳转，没有缓存。 使用场景：当迁移域名当时候，网站域名是永久性转移，这时可以用301； 而当只是在服务器内部跳转，比如访问服务器a….
-
前端面试题整理（持续收集，后期补充答案）
HTTP协议相关 HTTP建立连接之tcp三次握手 HTTP断开连接之tcp四次挥手 缓存：强缓存与协商缓存 网络七层协议 浏览器输入一个网址，到页面展示这中间经历了什么？ HTT…
-
前端学习记录之一：函数式编程
本节回顾 1.函数式编程（核心思想：把运算过程抽象成函数） 2.函数相关复习（函数是一等公民，高级函数，闭包） 3.函数式编程基础（lodash，纯函数，柯里化，管道，函数组合） …
