前端脚手架的执行原理

最近收到几位老师留言，提到一些脚手架相关的问题，跟着自己浅显的理解，以vue脚手架在windows系统上的执行为例做个分析。

正题之前，先说几个概念

脚手架的本质：运行在操作系统上node客户端里的可执行程序。

脚手架做了哪些工作？一般脚手架的工作内容主要包括三方面：

1. 创建项目+通用代码： 埋点、http请求、工具方法、组件库。
2. git操作： 创建仓库、代码冲突、远程代码同步、创建版本、发布打tag。
3. 构建+发布上线： 依赖安装和构建、资源上传CDN、域名绑定、测试\正是服务器。

脚手架给我们带来哪些好处？提升前端研发效能！（就这么一句空话~~）从其为我们带来的最终体验上来讲，是实现研发过程的：

1. 自动化：项目重复代码的copy、git操作、发布上线操作；
2. 标准化：项目创建、git flow、发布流程、回滚流程；
3. 数据化：使研发过程系统化、数据化、使得研发过程可量化。

脚手架的命令执行：

vue create csjName –g

1. vue 是脚手架名称
2. create 是command，脚手架中已注册的命令
3. csjName 是params，命令的参数
4. –g 是options，命令的配置
5. 一般options后也会有参数，我们称之为配置参数，上面命令其实是省略了true

   vue create csjName –g true

下面说一下vue脚手架的执行过程

环境要求，已安装node

先来思考一个问题：

我们安装vue脚手架时，安装的是@vue/cli

npm install @vue/cli –g

为什么创建项目的时候用的却是vue

vue create projectName

咱们先看 npm install @vue/cli –g命令完成拉资源后，在操作系统中都做了什么。

命令执行完成后，咱们切换到D:\mysoft\node\node_global（这个是自己安装node时设置的全局npm包的安装路径，并且已配置到环境变量中，不清楚的老师可以去熟悉一下node的安装教程），发现此路径下已经生成了一个cmd命令vue.cmd，因为此路径已配置到环境变量中，所以在cmd我们必然可以直接输入vue来执行vue.cmd。

那么vue.cmd文件中又执行了什么？打开vue.cmd

可以看到，其实它是去调用了vue脚手架资源路径下的vue.js文件

正如我们在这个路径下执行

node vue.js create csjName

是一样的。脚手架的命令及其参数的注册与解析都在此文件中完成。具体的代码逻辑不再深入讲了，感兴趣的老师可以自己去扒一下vue.js的代码，不难，还不到300行代码。（不要觉得是vue的脚手架，就被它吓到了）

再来思考个问题，在完成脚手架资源的下载后，为什么会在D:\mysoft\node\node_global下自动生成一个vue.cmd？我们能不能自定义这个脚手架的名字？

其实每个脚手架都是npm项目，vue.cmd是在此npm项目的package.json中配置的，我们也可以对其自定义修改。

欲修改脚手架名称，直接去D:\mysoft\node\node_global下重命名vue.cmd即可。如果是自己的脚手架，可在npm项目内的package.json中通过上述配置，指定脚手架的名称。

补充

另外在linux或mac系统中，其实node\node_global下并未生成vue.cmd，而是生成了一个叫做vue软链接，并且链向了node_global\node_modules\@vue\cli下的vue.js。

而且在linux和mac系统中，并未使用node vue.js，而是直接执行了vue.js那是因为在vue.js顶部已通过Shebang声明当前文件默认使用系统中环境变量/usr/bin/env 下的node解释器执行。此语法在windows系统中无效。

以上是对vue脚手架在windows中执行过程的浅显理解。不到之处，还请指正~~

最后安利一个自己已发布的npm项目csj-web-tools，旨在打造一个前端通用的工具库，就是自己平常封装的js工具函数，如对timeout的异步封装、对storage的面向对象的封装、对日期格式的转换、还有对象之间的深比较等，目前工具还不够丰富，欢迎大家一起使用&完善，一个人的力量很小~~

npm install csj-web-tools -g

github地址：GitHub - a514158642/csj-web-tools: 一款前端通用的工具函数一款前端通用的工具函数. Contribute to a514158642/csj-web-tools development by creating an account on GitHub.https://github.com/a514158642/csj-web-tools

API文档：项目介绍 · GitBookhttps://a514158642.github.io/web-tools/