前端架构学习-2-脚手架
若只需要创建模板的功能,可以使用plop,yeoman这两个框架实现,或者利用create-react-app自定义模板。这些都是针对模板创建需求的高效方法。
本文讲解的是系统级的脚手架,包含模板创建,git-flow控制,cicd等功能。
脚手架常见功能
- 模板创建
- 代码构建控制,如create-react-app中的webpack配置和eject,vue-cli的inspect等
- git-flow控制
- cicd
脚手架通用原理
默认你已经学会操作系统的部分基础知识了,如果没有,遇到不会的请自学
举个例子: 在npm i -g @vue/cli到vue create demo,vue这个命令为何能够执行。
先看npm i -g @vue/cli后的目录结构:
/bin
/vue 这个vue是软链接
/lib
/node_module 这里是npm i -g后包存放的位置
/@vue/cli
/bin
/vue.js
/package.json
下面是package.json部分代码
{
"bin": {
"vue": "./bin/vue.js"
}
}
下面是/bin/vue的第一行代码
#!/usr/bin/env node
npm i -g时,不仅会安装包到/lib/node_module下,还会解析@vue/cli/package.json,如果配置了bin,则会在/bin下创建对应的软链接,比如上述例子,软链接文件名则为vue,链接目标为@vue/cli/bin/vue.js- 环境变量$PATH中配置了/bin对应的路径,所以在终端执行
vue时,就会找到/bin/vue文件,执行它,就相当于执行@vue/cli/bin/vue.js - vue.js是js文件,脱离js解释器是不可能直接执行的,在linux中,默认只会当成shell文件去执行。第一行
#!/usr/bin/env node,实际上就是shell语法,它的作用,就是将该文件托管到node去执行。
脚手架作用
提升团队开发效率,如项目初始化模板,避免重复代码的编写,cicd等
脚手架功能及分类
脚手架前置知识
第三方库:
- yargs 或 commander 或 meow
- inquirer
- root-check
- dotenv
- ...
脚手架调试方法
这里的调试方法实际上就是npm包开发的其中一种通用调试方法
脚手架整体架构
用lerna进行模块化开发:utils、core、command...
lerna用统一版本号的模式,方便版本管理
一、准备阶段
用到的第三方模块:
- import-local
- npmlog
- chalk 或 colors
- semver, check-engines
- root-check
- axios
- userhome
- ...
功能:
- 使用脚手架时,优先选择本地安装的脚手架版本(若存在)
- 封装log模块,通过option:--verbose去控制log.verbose是否需要显示
- 检查node版本是否支持
- 检查脚手架是否为最新版本,提示更新(通过
axios.get(`https://registry.npmjs.org/${pkg.name}`)的方式去获取脚手架在npm上的信息) - 检查当前是否为root用户,如果是,则退为普通用户执行
- 检查是否存在用户主目录
二、命令构建
功能:
- 动态加载命令
脚手架编写
脚手架高阶技巧
- 基于缓存+node多进程实现动态命令加载和执行