前端脚手架入门学习笔记(一)

1.前端研发视角，分析开发脚手架的必要性

研发脚手架的核心目标是：提升前端研发效能

脚手架核心价值

将研发过程：

• 自动化：项目重复代码拷贝/git操作/发布上线
• 标准化：项目创建/git flow/回滚流程
• 数据化：研发过程系统化、数据化、使得研发过程可量化

和自动化构建工具区别

• 不满足需求：jenkins、travis通常在 git hooks 中触发，在服务端执行，无法覆盖研发本地的功能；
• 定制复杂，需要Java语言，对前端不友好

2.从使用角度理解什么是脚手架

脚手架简介

脚手架本质是一个操作系统的客户端，它通过命令执行。如：

vue create vue-test-app

这条命令由三部分组成：

• 主命令： vue
• command：create
• command的param(参数)：vue-test-app
  意为：创建一个vue项目，项目名称是vue-test-app；

如果当前文件已存在，需要进行覆盖，可以强制进行安装vue项目：

vue create vue-test-app --force

--force叫做 option，用来辅助脚手架在特定场景下用户的选择（可以理解为配置）。还有一种场景：
我们希望使用淘宝源来安装项目，可以输入命令：

vue create vue-test-app --force -r https://registry.npm.taobao.org

-r也叫做 option，可以替换为--registry，可以输入下面命令，查看vue create支持的所有option：

vue create --help

-r https://registry.npm.taobao.org后面的https://registry.npm.taobao.org为option的param，另外--force可以理解为：--force true，简写为：--force或-f。

脚手架执行原理

脚手架执行原理步骤如下：

• 再终端输入vue create vue-test-app
• 终端解析出vue命令
• 终端在环境变量中找到vue命令，如：which vue或where vue
• 终端根据vue命令链接到实际文件vue.js
• 终端利用node执行vue.js
• vue.js解析command / options
• vue.js执行command
• 执行完毕，推出执行

3.从应用的角度：如何开发一个脚手架

以 vue-cli 为例

• 开发npm项目，该项目中应包含一个bin/vue.js文件，并将这个项目发布到npm
• 将npm项目安装到node的lib/node_modules
• 在node的bin目录下配置vue软连接指向lib/node_modules/@vue/cli/bin/vue.js

声明：本文内容为学习笔记，来源于慕课网付费视频课程。¹

---

1. 慕课网：《Web前端架构师》 ↩︎