脚手架开发入门

143 阅读4分钟

前端脚手架的必要性

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

脚手架核心价值

将研发过程

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

和自动化构建工具区别

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

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

脚手架简介

本质是一个操作系统的客户端。这是因为它过通过命令执行,而在终端中执行一个命令,其中这个命令本身就是一个客户端。

比如:

vue create vue-test-app --force

以上三个命令由三个部分组成:

  • 主命令:vue

  • command:子命令 create

  • command 的 param:vue-test-app

  • option:--force,命令配置项

以上命令的执行原理

  • 输入vue:相当于执行which vue,会在node安装目录下的bin文件夹内找到vue@文件夹,xxx@表示一个超链接,链接到vue真正的安装目录的node/node版本号文件夹/lib/node_modules/@vue/cli/bin/vue.js文件。
  • 终端利用node执行vue.js
  • vue.js 解析 command / options
  • vue.js 执行 command
  • 执行完毕,退出执行

:

  • node/node版本号文件夹/lib/node_modules:是在node中全局安装的npm包

开发脚手架的思路

  • 开发一个npm项目,该项目中包含一个 bin/vue.js 文件,并将这个项目发不到 npm上
  • 将npm项目安装到nodelib/node_modules
  • nodebin目录下配置vue软连接指向 lib/node_modules/@vue/cli/bin/vue.js

脚手架实现原理

通过回答以下3个问题来了解脚手架的实现原理:

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

    在项目中的package.json文件中,有以下属性来设置脚手架的命令名称,以及对应的执行文件:

    ...
    “bin”: {
        "vue": "bin/vue.js"
    }
    ...
    
  2. 全局安装 @vue/cli 时发生了什么?

    npm将全局安装的包下载到 node/node版本号文件夹/lib/node_modules中,下载完后会去解析项目中的package.json文件中的bin属性,然后在node/node版本号文件夹/bin中创建一个软链接,该软连接就指向lib/node_modules/项目中的package.json文件中bin配置的命令对应的文件。

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

    输入vue:相当于执行which vue,会在node安装目录下的bin文件夹内找到vue@文件夹,xxx@表示一个超链接,链接到vue真正的安装目录的node/node版本号文件夹/lib/node_modules/@vue/cli/bin/vue.js文件。

    .js文件是不能直接自己执行的,在终端中输入命令却能执行的根本还是调用了node来执行.js文件。这是由于该.js文件顶部有这样一行代码:

    #!/usr/bin/env node
    

    其中,/usr/bin/env 表示的是当前操作系统中的环境变量配置,/usr/bin/env node就是在环境变量中查找node。在.js文件第一行添加这句代码表示去使用node来执行当前文件。

简单创建一个node命令:

  • 在任意位置创建test.js文件,并在该文件第一行输入#!/usr/bin/env node;
  • 在node的软连接目录bin下,执行ln -S test.js文件的实际目录 test创建软连接test@,该软连接就指向test.js文件,此时也就创建了test的可执行命令

脚手架开发流程

开发流程:

  • 创建 npm 项目

  • 创建脚手架入口文件,最上方添加:

    #!/usr/bin/env node
    
  • 配置package.json,添加bin属性

  • 编写脚手架代码

  • 将脚手架发布到到npm,在项目目录下:

    npm login
    npm publish
    

使用流程:

  • 安装脚手架
    npm install -g your-own-cli
    
  • 使用脚手架
    your-own-cli
    

脚手架开发难点解析

  • 分包:将复杂的系统拆分成若干个模块
  • 命令注册
  • 参数解析
  • options全称
  • options简写
  • 带params的options
  • 帮助文档
    • global help
      • Usage
      • Options
      • Commands