加载中...
  • 脚手架设计(一)

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

    1.脚手架核心价值

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

    1.1 脚手架本质

    1.node在window中是一个node.exe,在Mac中是一个可执行文件(node*),因为node是操作系统的一个客户端,脚手架的本质是通过node去执行js文件,所以也可以说脚手架的本质是操作系统的客户端。

    2.本质来说没有区别,PC安装的应用只是提供了一个GUI,脚手架是通过命令的形式

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

    2.1脚手架简介

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

    1
    vue create vue-test-app

    上面命令由3个部分组成:

    主命令:vue
    command:create
    command的params:vue-test-app
    他表示创建一个vue的项目,项目的名称为vue-test-app,以上是一个较为简单的脚手架命令,但实际场景往往更加复杂,比如:

    当前目录已经有文件了,我们需要覆盖当前目录下的文件,强制进行安装vue项目,此时我们就可以输入

    1
    vue create vue-test-app --force

    这里的–force叫做option,用来辅助脚手架确定在特定场景下用户的选择(可以理解为配置)。还有一种场景:

    通过vue create创建项目时,会自动执行npm install帮用户安装依赖,如果我们希望使用淘宝源来安装,可以使用命令:

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

    这里的-r也叫做option,它与–force不同的是它使用-,并且使用了简写,这里的-r也可以替换成–registry,如果不知道vue create支持的所有options,可以使用:

    1
    vue create --help

    -r https://registry.npm.taobao.org后面的https://registry.npm.taobao.org成为option的param,其实--force可以理解为:--force true,简写为:–force或-f

    2.2脚手架执行原理

    Rt91fO.md.png

    2.2.1脚手架的执行原理如下:

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

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

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

    3.1 问题项

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

    1
    npm install -g @vue/cli

    在/usr/local/lib/node_modules/@vue/cli文件夹下的package.json的

    1
    2
    3
    "bin":{
    "vue": "bin/vue.js"
    }

    这个软连接的名称就是vue,所以添加后的命令为vue

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

    先把@vue/cli下载到/usr/local/lib/node_modules中,然后根据@vue/cli下的package.json,根据bin中的定义去/usr/local/bin/下去定义@vue/cli的软连接vue

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

    1.终端在环境变量中找vue指令(相当于which vue命令),看有没有被注册,未注册则返回command not found,注册了则去找vue指令软连接指向的地址/usr/local/lib/node_modules/@vue/cli/bin/vue.js,去执行vue.js文件中的代码

    2.因为这个js文件的顶部写了#!/usr/bin/env node,标识在环境变量中查找node,告诉系统使用node去执行这个js文件

    4. 脚手架开发流程

    4.1 开发流程

    1.创建npm项目
    2.通过npm init -f 创建一个package.json文件
    3.配置package.json,添加bin属性,创建一个命令,指向 bin/index.js 作为入口文件;入口文件的最上方必须添加 #!/usr/bin/env node代码
    4..编写脚手架代码
    5.将脚手架发布到npm

    4.2 使用流程

    安装脚手架:npm install -g zhou.wp-cli
    使用脚手架:zhou.wp-cli

    4.3 发布

    1. 打开npm的官网,注册一个账号;
    2. 打开邮箱,进行验证;
    3. npm login 输入账号、密码和邮箱进行登录;
    4. npm publish 将项目发布上去。

    5. 脚手架本地link标准流程

    链接本地脚手架:

    1
    2
    cd your-cli-dir
    npm link

    链接本地库文件:

    1
    2
    3
    4
    cd zhou.wp-cli
    npm link
    cd zhou.wp-cli
    npm zhou.wp-cli

    取消链接本地库文件:

    1
    2
    3
    4
    5
    6
    7
    8
    cd zhou.wp-cli
    npm unlink
    cd zhou.wp-cli
    # link存在
    npm unlink zhou.wp-cli
    # link不存在
    rm -rf node_modules
    npm install -S zhou.wp-cli

    理解npm unlink:

    npm link zhou.wp-cli:将当前项目中的node_modules下指定的库文件链接到node全局node_modules下的库文件
    npm link:将当前项目链接到node全局node_modules中作为一个库文件,并解析bin配置创建可执行文件
    理解npm unlink:

    npm unlink:将当前项目从node全局node_modules中移除
    npm unlink zhou.wp-cli:将当前项目中的库文件依赖移除

    上一篇:
    解读js函数防抖与函数节流
    下一篇:
    js微任务和宏任务
    本文目录
    本文目录