前端架构师必备的脚手架小知识(一)

Kryon
1,671 阅读4分钟

这是我参与11月更文挑战的第25天，活动详情查看：2021最后一次更文挑战

前端架构师必备的脚手架小知识(一)

核心目标

提升前端研发效能

核心价值

将研发过程:

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

和自动化构建工具的区别

jenkins、travis等自动化构建工具已经比较成熟了,为什么还需要自研脚手架

  • 不满足需求: jenkins、travis 通常在git hooks中触发,需要在服务端执行,无法覆盖研发人员本地的功能, 如: 创建项目自动化、本地git操作自动化等
  • 定制复杂:jenkins、travis定制过程需要开发插件,其过程较为复杂,需要使用java语言,对前端同学不够友好

脚手架实现原理

1.为什么全局安装 @vue/cli 后会添加的命令为 vue?

$ npm install -g @vue/cli

在 package.json中 配置了 bin/vue.js

$ which vue
$ cd /usr/local/bin/vue
$ ls -l
lrwxr-xr-x  1 dmw    admin         59 11  8 13:49 vue -> ../../../Users/dmw/.config/yarn/global/node_modules/.bin/vue #/bin/vue 软链接
$ cd /Users/dmw/.config/yarn/global/node_modules/.bin
$ ls -l
lrwxr-xr-x  1 dmw  staff  22 11  8 13:49 vue -> ../@vue/cli/bin/vue.js # vue指向 @vue/cli/bin/vue.js
$ cd ../@vue/cli
$ cat package.json
"bin": {
	"vue": "bin/vue.js" # bin 进行了配置
},

2.全局安装 @vue/cli时发生了什么?

  • 将@vue/cli的包下载到/.config/yarn/global/node_modules
  • 解析 package.json中的bin配置
  • 找到bin, 在bin目录下创建软链接到 /usr/local/bin/

3. 执行 vue 命令时发生了什么? 为什么 vue 指向一个 js文件,我们却可以直接通过 vue命令去执行它?

  • 在环境变量中找 vue 是否被注册

  • cat vue.js

    #!/usr/bin/env node  
// .....

  • #!/usr/bin/env node 告诉我们的操作系统,在直接调用 vue.js这个文件的时候到环境变量中找node这个命令,找到node命令之后,通过node命令执行, 相当于 /usr/bin/env node vue.js

  • 如何创建软链接?

    ln -s vue /Users/dmw/.config/yarn/global/node_modules/.bin/vue.js

扩展: 下面两种写法的区别

#!/usr/bin/env node
#!/usr/bin/node
  • 第一种是在环境变量中查找 node
  • 第二种是直接执行 /usr/bin目录下的node, 不建议

脚手架实现原理进阶

1. 为什么说脚手架本质是操作系统的客户端? 它和我们在PC上安装的应用/软件有什么区别?

node 本身是一个客户端~ windows node.exe / linux 可执行文件

脚手架文件是通过 node 来运行的

2.如何为 node脚手架命令创建别名?

# 软链接
ln -s vue /Users/dmw/.config/yarn/global/node_modules/.bin/vue.js
# 起别名
ln -s ./vue vue2

3.描述脚手架命令执行的全过程

whichvue.png

从使用的角度理解脚手架

脚手架本质上是一个操作系统的客户端, 它通过命令行执行, 比如:

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 创建项目时,会自动执行 npm install帮用户安装依赖,如果我们希望使用淘宝源来安装可以输入命令:

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

这里的 -r 也叫做 option, 是 --registry的简写

脚手架的执行过程如下:

  • 在终端输入 vue create vue-test-app
  • 终端解析出 vue 命令
  • 终端在环境变量中找到 vue 命令 : which vue
  • 终端根据 vue 命令链接到实际文件 vue.js
  • 终端利用 node 执行 vue.js
  • vue.js 解析 command / options
  • vue.js 执行 command
  • 执行完毕,退出程序

从应用的角度看如何开发一个脚手架

以 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进行执行

avatar
文章
阅读
粉丝