什么是前端脚手架?脚手架原理?
一、站在前端研发的视角,分析开发脚手架的必要性
研发效能
- 开发脚手架的核心目标是:提升前端的研发效能
- 大厂研发一定需要用到脚手架
脚手架核心价值
将研发过程:
- 自动化:项目重复代码拷贝/git 操作/发布上线操作
- 标准化:项目创建/git flow/发布流程/回滚流程
- 数据化:研发过程系统化、数据化,使得研发过程可量化
和自动化构建的区别
问题:jenkins、Travis 等自动化构建工具已经比较成熟了,为什么还需要自研脚手架?
- 不满足需求:jenkins,Travis 通常在 git hooks 中触发,需要在服务端执行,无法覆盖研发人员本地的功能:如创建项目自动化、本地 git 操作自动化等、
- 定制复杂:jenkins、Travis 定制过程需要开发插件,其过程较为复杂,需要使用 java 语言,对前端同学不友好
二、从使用角度理解什么是脚手架?
脚手架简介
脚手架本质是一个操作系统的客户端,它通过命令行执行,比如:
vue create vue-test
上面这条命令由 3 个部分组成:
- 主命令:vue
- command(子命令):create
- command 的 param:vue-test
它表示创建一个 vue 项目,项目名称为 vue-test,以上是最简单的脚手架命令,但实际场景往往更加复杂,比如: 当前项目已经有文件,我们需要覆盖当前目录下的文件,强制进行安装vue
项目,此时我们就可以输入
vue create vue-test --force
这里的–force 叫做 option,用来辅助脚手架确认在特定场景下用户的选择(可以理解为配置)。还有一种场景:通过vue create
创建项目时,会自动执行npm install
帮助用户安装依赖,如果我们希望使用淘宝源来安装,可以输入命令:
vue create vue-test --force -r https://registry.npm.taobao.org
这里的 -r 也叫做 option,它与--force
不同的是它使用 -
,并且使用简写,这里的-r
也可以替换成-- registry
,我们可以通过帮助命令看到vue create
支持的所有 options:
vue create --help
脚手架执行原理
- 终端输入
vue create vue-test
- 终端解析出
vue
命令 - 终端在环境变量中找到
vue
命令(相当于执行 which vue) - 终端根据
vue
命令链接到实际文件vue.js
- 终端利用
node
执行vue.js
vue.js
解析 command/optionsvue.js
执行 command- 执行完毕,退出执行
which vue
// /c/Users/lkjjhj/AppData/Local/Yarn/bin/vue
从应用的角度看如何开发一个脚手架
这里以 vue-cli 为例
- 开发
npm
项目,该项目中应包含一个bin/vue.js
文件,并将这个项目发布到npm
- 将
npm
项目安装到node
的lib/node_modules
- 在
node
的bin
目录下配置vue
软链接指向lib/node_modules/@vue/cli/bin/vue.js
这样我们在执行vue
命令的时候就可以找到vue.js
进行执行
还有疑问需要解答
- 为什么全局安装
@vue/cli
后会添加的命令为vue
?
npm install -g @vue/cli
- 全局安装
@vue/cli
时发生了什么?* 为什么vue
指向一个 js 文件,我们却可以通过vue
命令去执行它?三、脚手架的实现原理
==========
脚手架实现原理
如果你能回答以下 3 个问题,就掌握了脚手架的实现原理:
- 为什么全局安装
@vue/cli
后会添加命令为vue
?
npm install -g @vue/cli
答:在 package.json 中配置 bin
"bin": {"vue": "bin/vue.js"
}
- 全局安装
@vue/cli
时发生了什么? 答:下载依赖,并配置 bin 命令* 执行vue
命令时发生了什么?为什么vue
指向一个js
文件,我们却可以直接通过vue
命令去执行它?脚手架原理进阶
我们继续尝试回答以下 2 个问题?
- 为什么说脚手架本质是操作系统的客户端?它和我们在 PC 上安装的应用/软件有什么区别?* 如何为
node
脚手架命令创建别名? 通过软链接创建别名* 描述脚手架命令执行的全过程。```
#!/usr/bin/env node// 在环境变量中查找node
#!/usr/bin/node// 直接执行 usr/bin 目录下的 node
四、脚手架的开发流程
==========脚手架开发流程详解
---------### 开发流程* 创建`npm`项目
* 创建脚手架入口文件,最上方添加:
#!/usr/bin/env node
* 配置`package.json`,添加`bin`属性
* 编写脚手架代码
* 将脚手架发布到 npm### 使用流程* 安装脚手架
npm install -g best-cli
* 使用脚手架
best - cli;
脚手架开发难点解析
---------* 分包:将复杂的系统拆分成若干模块* 命令注册:```
vue create
vue add
vue invoke
- 参数解析:
vue command [options] <params>
- options 全称:
--version
、--help
- options 简写:
-V
、-h
- 带 params 的 options:
--path /User/xxx/vue-test
- 帮助文档:
Usage: vue <command> [options]Options:-V, --versionoutput the version number-h, --help output usage informationCommands:create [options] <app-name>create a new project powered by vue-cli-serviceadd [options] <plugin> [pluginOptions] install a plugin and invoke its generator in an already created projectinvoke [options] <plugin> [pluginOptions]invoke the generator of a plugin in an already created projectinspect [options] [paths...] inspect the webpack config in a project with vue-cli-serviceserve [options] [entry]serve a .js or .vue file in development mode with zero configbuild [options] [entry]build a .js or .vue file in production mode with zero configui [options] start and open the vue-cli uiinit [options] <template> <app-name> generate a project from a remote template (legacy API, requires @vue/cli-init)config [options] [value] inspect and modify the configoutdated [options] (experimental) check for outdated vue cli service / pluginsupgrade [options] [plugin-name](experimental) upgrade vue cli service / pluginsmigrate [options] [plugin-name](experimental) run migrator for an already-installed cli plugininfo print debugging information about your environmentRun vue <command> --help for detailed usage of given command.
- 命令行交互
- 日志打印
- 命令行文字变色
- 网络通信:HTTP/WebSocket
- 文件处理
- 等等…
最后
最近找到一个VUE的文档,它将VUE的各个知识点进行了总结,整理成了《Vue 开发必须知道的36个技巧》。内容比较详实,对各个知识点的讲解也十分到位。
有需要的小伙伴,可以点击下方卡片领取,无偿分享
什么是前端脚手架?脚手架原理?相关推荐
- 前端工程化——脚手架及自动化构建
定义 一切以提高效率.降低成本.质量保证为目的的手段,都属于工程化 前端工程化主要解决的问题 传统语言或语法的弊端 无法使用模块化/组件化 重复性的机械工作 代码风格统一.质量保证 依赖后端服务接口的 ...
- 搭建自己的前端自动化测试脚手架(一)
搭建自己的前端自动化测试脚手架(一) LancerComet at 17:55, 2016.07.17. 欢迎转载,转载时还请保留作者署名. 随着前端项目规模的日益膨胀,自动化测试越来越受到广大前端与 ...
- 搭建自己的前端自动化测试脚手架(三)
上一篇:搭建自己的前端自动化测试脚手架(二) By LancerComet at 23:47, 2016.07.22. 欢迎转载,转载时还请保留作者署名. 这是最后一章了!(・∀・) 之前我们配置好了 ...
- 大前端的技术原理和变迁史
本文适合前端新手入门,阅读人群最好是前端新手或者后台开发人员,因为我不敢保证对前端老司机有太多收获. 通过阅读本文,你将会大致了解前端这些年发生的事情,以及一些前端当前主流技术的简单原理介绍.所有涉及 ...
- 前端路由工作原理与使用
单页应用和多页应用 单页面应用:所有功能在一个页面上实现 一个.html 文件 前端路由 组件化开发 网易云音乐 小米移动端 多页应用:与单页应用相对应的,不同的功能通过不同的页面来实现 单页面 - ...
- 前端工程化: 脚手架+物料库快速生成新项目
零.前言 美团有乐高, 京东有通天塔,阿里有飞冰,大厂都在尝试用自动化工具减少人工,看完这一篇,考虑给你的团队搭建一套自动化开发工具吧! 一.背景 笔者所在公司并非大厂, 发现一些痛点. 1.前端研发 ...
- 关于前端的脚手架工具的理解
一句话概括:快速构建项目环境的工具的称呼 在不同的项目中因为用到的技术栈不同,就需要对不同的项目进行环境搭建,而手动从零搭建环境自然是一件费时费力的工作,基于"不要重复造轮子"的编 ...
- 从零开始学WEB前端——VUE脚手架
- wex5 教程 前端UI编译原理与记事本编辑
一 前言 wex5页面,与html页面有何差异?两者之前的关系是什么?是如何完成转译的? 能否像编辑html那样用记事本来修改w页面? wex5前端UI在云部署后能否在云端进行二次编辑,而不需要在we ...
- 404 单页应用 报错 路由_详解vue 单页应用(spa)前端路由实现原理
写在前面:通常 SPA 中前端路由有2种实现方式: window.history location.hash 下面就来介绍下这两种方式具体怎么实现的 一.history 1.history基本介绍 w ...
最新文章
- openstack中手动修改虚拟机IP后不能通信
- python leetcode_七十五、Python | Leetcode哈希表系列
- C++统计微妙级时间消耗(chrono)
- android10获取imei,Android 10 root用户获取imei
- dateframe取某列数据_Python获取时序数据并进行可视化分析
- 售票系统的组件图和部署图_门禁安装大样图、管线图、系统图、电锁安装图
- 思科模拟器GNS3将路由器变成交换机的方法
- java从Object类型转换成double,int类型
- python合成gif动图
- 什么是动态代理?动态代理有哪些应用?如何编写动态代理案例
- Android 仿UC首页 某个版本--coor
- [转]结婚戒指为什么戴在无名指?
- 支持向量机SVM--线性
- Python统计文件夹大小
- Leetcode0953. 验证外星语词典(simple)
- word python插件_用 Python 自动生成 Word 文档
- jQuery中ajax用form表单方式提交数据
- 如何安装第三方站点下载的Matlab工具箱或硬件支持包,亲测有效。
- 中英文说明书丨ProSci LAG-3 重组蛋白
- JDBC (Java DB Connection)---Java数据库连接
热门文章
- 微信小程序之音乐播放
- Pandas中DataFrame的属性、方法、常用操作以及使用示例
- SLE46C-40.K44P-M12安全传感器
- 炉石android更新日志,炉石传说18.4版本更新了什么?18.4版本更新内容汇总[多图]...
- 哲哲打游戏 (25 分)
- Java找对象笑话,搞笑找对象的句子
- 从婚恋网站危机到6千亿元蛋糕
- 平流式沉淀池计算例题_平流式沉淀池计算例题.doc
- 用 .NET / C# 实现录屏小程序并保存为视频文件
- html文本环绕’,css如何使文字环绕显示