如何快速开发脚手架

前言

什么是 cli

Command Line Interface，命令行工具，通过命令行来交互的工具或应用。

前端日常开发中，会遇见各种各样的 cli，比如：

vue-cli

create-react-app

angular-cli

webpack-dashboard

webpack-cli

gulp-cli

…

web 开发者的辅助工具，旨在减少低级重复劳动，专注业务提高开发效率，规范 develop workflow。

使用 cli 的场景：

快速生成应用模板，如 vue-cli 等根据与开发者的一些交互式问答生成应用框架。自己搭建脚手架、组件库等
创建 module 模板文件，如 angular-cli，创建 component、module 等。项目十分庞大，开发一个新页面需要大量繁琐的步骤
服务启动，serve
代码校验，lint
编译 build
自动化测试
编译分析
git 操作
生成的代码上传 CDN
其他小工具：http 请求 api、图片压缩、生成雪碧图等

比如 vue 常见的项目结构：

- src
  - views
    - a.vue
  - components
    - b.vue
  - router
    - routes
  - api
  - store
    - actions
    - mutations
    - state

在 views、components 创建 .vue 文件 -> 在 router 指定路由 -> 在 api 新增接口 -> 在 store 中处理接口

又比如 react 常见的项目结构：

- src
  - feature
    - a
      - index.tsx
      - components
        - b.tsx
      - redux
        - constants.ts
        - fetchData.ts
        - hooks.ts
        - initilState.ts
        - reducer.ts

Node.js 编写 cli 的本质

Node.js 编写的就是 js

test/index.js

1	console.log('hello world')

命令行调用

> node index.js

## 输出：
> hello world

npm init 新增 package.json，在 scripts 字段添加命令：

{
  "name": "hello-cli",
  "scripts": {
    "hello-cli": "node index.js"
  }
}

命令行调用

> npm run hello-cli

## 输出：
> hello world

给 cli 命名

hello-cli

test2/index.js

#!/usr/bin/env node

// 文件顶部声明执行环境
console.log('hello world')

在 package.json 中添加：

{
  "name": "hello-cli",
  "bin": {
    "hello-cli": "index.js"
  }
}

在当前 package.json 目录下，执行 npm link，然后就会在 node/v${version}/bin 目录生成一个快捷方式

npm link

cd ~/.nvm/versions/node/v12.16.3/bin

ls

这样就能在任意地方执行 hello-cli 这个命令了

卸载：npm uninstall -g hello-cli

npm link 后与 npm scripts 的对比

显而易见，脱离业务，全局使用，可以不断迭代开发发布

进阶

组件库

rj-component-vue 组件库，demo，demo-swiper …

npm run contribute xxxx 新增组件

脚手架

有了 vue-cli、create-react-app 等，为什么还要自己开发脚手架？

前端往往是欲求不满的，希望自己折腾。随着业务的不断发展，必然会出现需要针对业务开发的实际情况来进行调整。例如：

脚手架功能不足，每次新增又很麻烦
脚手架有些功能冗余，删除无用
融合公司业务特色
通过调整插件与配置实现性能优化

总而言之，随着业务发展，需要追求“个性化”，走出一条具有「我米」特色的前端主义道路。

脚手架要干什么事情

功能丰富程度不同的脚手架，复杂程度自然也不太一样。但是总体来说，脚手架的工作大体都会包含几个步骤：

init，初始化，一般是对环境的初始化，前置检查，选项配置
用户输入，自定义配置
生成配置文件
生成项目结构，需要定义一个项目模版
安装依赖
lint，代码检查，校验，清理等
component，组件/模块构建

定义一个项目模版

脚手架其实就是复制粘贴，我们首先需要一个模版做样本。其中涉及到自定义可配置的部分，就需要我们使用模版变量进行动态填充。例如根据用户在终端中输入的内容，动态填充 package.json 中的 name 值。

模版引擎

ejs、pug、artTemplate、handlehars…我一般使用artTemplate、handlehars，是大胡子语法，跟 vue 模版语言贴合。

模版位置

本地还是远程？放本地速度快，但升级困难；放远程便于升级

构建脚手架

这里举一个微信小程序脚手架的🌰

rjmp-template 小程序模版

规范目录结构
css -> sass/scss/less，内置常用 reset、mixin，小程序起初只支持 css
内置常用 components
内置常用 utils/plugins
第三方插件，如阿拉丁统计
内置 store，小程序起初没有 store 概念
支持 npm 构建，小程序起初不支持（compile.js，参考 wepy，遍历文件识别 require，读写，babel 转化，uglify 混淆）踩了一个 buffer 坑，加 npmHack 单独处理

rjmp-cli 生成小程序脚手架

commander 完整的 node.js 命令行解决方案
使用 process.argv 读取参数
inquirer 常见的交互式命令行用户界面的集合
download-git-repo 下载模版
自定义模版 handlebars 大胡子语法；渲染模版 utils/render.js
安装依赖 utils/install.js，使用 child_process 开启子进程
界面美化：
- chalk 彩色输出
- log-symbols 彩色符号
- ora 创建 spinner，loading 加载中效果
- boxen 创建头尾的那个小“面板”
- beeper，发出 “哔” 声 😂 例如出错时报警

衍生：微信小程序框架的演变

这个脚手架是2018年开发的，当时供公司内部开发使用，后来离职把业务部分抽离后开放出去，不过已经不适用了，原因是微信小程序进入了云开发时代。

小程序框架开发 -> wepy/mpvue/taro 开发 -> 自定义开发 -> 云开发

以前没有的现在基本都有了，而且前端能干后端的事。云数据库、云存储、云函数、云调用，实现热更新热修复。消息推送，去年为此还开发了一版适配小程序的小米推送 sdk。

web-app

Mobile

mini-app

quick-app

hybrid-app

ionic

uni-app

react native

weex

flutter