脚手架简介及入门（一）


脚手架简介及入门

1、脚手架的核心价值

将研发过程：

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

和自动化构建的区别

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

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

2、脚手架简介

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

vue create vue-test-app

上面这条命令由3个部份组成：

  • 主命令: vue
  • command: create
  • command 的 param: vue-test-app

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

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的param, 其实 --force可以理解为 --force true, 简写为 --force或-f

查看指令的安装所在地

which vue

注意：

#!/user/bin/env node
#!/user/bin/node

以上两种写法的区别在于前者调用的是环境变量的node, 而后面是固化了node的调用，如果用户的node安装目录有变化就会找不到node

3、脚手架的开发流程

  • 创建npm项目
  • 创建脚手架入口文件， 最上方添加
#!/usr/bin/env node
  • 配置package.json, 添加bin属性
  • 将脚手架命令添加到本地环境， 在项目的根目录下执行以下命令（或者可以直接发布到npm后，再在本地进行下载安装）
npm link  --如果有重复，那么可以使用npm link --force 进行覆盖， 如果需要删除时通过which 【指令】 找到安装目录进行手动删除， 或者用 npm unlink you-lib进行删除
  • 编写脚手架代码以及调试
  • 编写脚手架的帮助文档， 如下
vue -h --表示vue主命令的帮助文档
vue create -h --表示vue create子命令的帮助文档
  • 将脚手架代码发布到npm

4、脚手架入门

  • 初始化项目 npm init -y
  • 配置package.json如下（如需要使用ts的可以进行配置）
{
  "name": "even",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "bin": {
    "even": "bin/index.js"
  },
  "scripts": {
    "prestart": "tsc",
    "watch": "tsc --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
  • 在bin/index.js的入口文件中需要添加
#! /usr/bin/env node
console.log('this is test')
  • 通过npm publish到npm库中，本地安装进行使用

5、脚手架的开发

通过node进行脚手架开发，可以参考博客 node命令行工作学习