小白实现一个自己的CLI - 支持Vue App多子应用的批量打包功能(一)

支持Vue App多子应用的批量打包CLI

场景前沿

写过Vue的小伙伴 应该都有过类似的配置经验
vue-cli-service build
用法如下, 详细用法说明请移步vue-cli官网

用法：vue-cli-service build [options] [entry|pattern]

选项：

  --mode        指定环境模式 (默认值：production)
  --dest        指定输出目录 (默认值：dist)
  --modern      面向现代浏览器带自动回退地构建应用
  --target      app | lib | wc | wc-async (默认值：app)
  --name        库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
  --no-clean    在构建项目之前不清除目标目录
  --report      生成 report.html 以帮助分析包内容
  --report-json 生成 report.json 以帮助分析包内容
  --watch       监听文件变化

一般实际项目中会同时存在多个子应用, 并在packages.json里边分别配置打包命令.

"scripts": {
    "serve": "cross-env VUE_APP_BUILD=dev vue-cli-service serve",
    "serve:mock": "cross-env VUE_APP_MOCK=yes VUE_APP_BUILD=dev vue-cli-service serve",
    "build:accept-goods": "cross-env VUE_APP_BUILD=release VUE_APP_TARGET=accept-goods vue-cli-service build --mode production --dest dist/accept-goods",
    "build:receiving-adjustment": "cross-env VUE_APP_BUILD=release VUE_APP_TARGET=receiving-adjustment vue-cli-service build --mode production --dest dist/receiving-adjustment",
    "build:stock-transfer": "cross-env VUE_APP_BUILD=release VUE_APP_TARGET=stock-transfer vue-cli-service build --mode production --dest dist/stock-transfer",
    "build:unstacking": "cross-env VUE_APP_BUILD=release VUE_APP_TARGET=unstacking vue-cli-service build --mode production --dest dist/unstacking",
    "build:query-batch": "cross-env VUE_APP_BUILD=release VUE_APP_TARGET=query-batch vue-cli-service build --mode production --dest dist/query-batch",
    "build:contanier-search": "cross-env VUE_APP_BUILD=release VUE_APP_TARGET=contanier-search vue-cli-service build --mode production --dest dist/contanier-search",
    "build:load-pack": "cross-env VUE_APP_BUILD=release VUE_APP_TARGET=load-pack vue-cli-service build --mode production --dest dist/load-pack",
    "build:inventory-transfer": "cross-env VUE_APP_BUILD=release VUE_APP_TARGET=inventory-transfer vue-cli-service build --mode production --dest dist/inventory-transfer",
    "build:stock-count": "cross-env VUE_APP_BUILD=release VUE_APP_TARGET=stock-count VUE_APP_CODE=WINV_COUNT vue-cli-service build --mode production --dest dist/stock-count",
    "build:stock-count-demo": "cross-env VUE_APP_BUILD=release VUE_APP_TARGET=stock-count VUE_APP_CODE=count_demo vue-cli-service build --mode production --dest dist/stock-count",
    "build:direct-inbound": "cross-env VUE_APP_BUILD=release VUE_APP_TARGET=direct-inbound vue-cli-service build --mode production --dest dist/direct-inbound",
    "build:direct-outbound": "cross-env VUE_APP_BUILD=release VUE_APP_TARGET=direct-outbound vue-cli-service build --mode production --dest dist/direct-outbound",
    "build:wave-sorting": "cross-env VUE_APP_BUILD=release VUE_APP_TARGET=wave-sorting vue-cli-service build --mode production --dest dist/wave-sorting",
    "build:wave-picking": "cross-env VUE_APP_BUILD=release VUE_APP_TARGET=wave-picking VUE_APP_CODE=WINV_OUT_LOAD vue-cli-service build --mode production --dest dist/wave-picking",
    "build:unloading": "cross-env VUE_APP_BUILD=release VUE_APP_TARGET=unloading  VUE_APP_CODE=WINV_OUT_UNLOAD vue-cli-service build --mode production --dest dist/unloading",
    "build:secondary-sorting": "cross-env VUE_APP_BUILD=release VUE_APP_TARGET=secondary-sorting  VUE_APP_CODE=WINV_OUT_SORT vue-cli-service build --mode production --dest dist/secondary-sorting",
    "build:associated-site": "cross-env VUE_APP_BUILD=release VUE_APP_TARGET=associated-site vue-cli-service build --mode production --dest dist/associated-site",
    "build:quality-check": "cross-env VUE_APP_BUILD=release VUE_APP_TARGET=quality-check vue-cli-service build --mode production --dest dist/quality-check",
    "build:stock-inquiry": "cross-env VUE_APP_BUILD=release VUE_APP_TARGET=stock-inquiry vue-cli-service build --mode production --dest dist/stock-inquiry",
    "build:putaway-load": "cross-env VUE_APP_BUILD=release VUE_APP_TARGET=putaway-load vue-cli-service build --mode production --dest dist/putaway-load",
    "build:cidTask-pick": "cross-env VUE_APP_BUILD=release VUE_APP_TARGET=cidTask-pick vue-cli-service build --mode production --dest dist/cidTask-pick",
    "build:unpicking": "cross-env VUE_APP_BUILD=release VUE_APP_TARGET=unpicking vue-cli-service build --mode production --dest dist/unpicking",
    "build:processing-perform": "cross-env VUE_APP_BUILD=release VUE_APP_TARGET=processing-perform  VUE_APP_CODE=WINV_WORK_ORDER_EXECUTE vue-cli-service build --mode production --dest dist/processing-perform",
    "build:text": "cross-env VUE_APP_BUILD=release VUE_APP_TEXT=test VUE_APP_TARGET=text vue-cli-service build --mode production --dest dist/text",
    "build": "npm run build:accept-goods",
    "publish:accept-goods:dev": "cross-env vue-cli-service publish --key accept-goods --dest dist/accept-goods --env dev",
    "lint": "vue-cli-service lint"
  },

如上, 恐怖如斯…
所以存在一个批量打包的功能, 是多么的美好!

工具的诞生

经过不懈的研究和琢磨, hwms-cli命令行工具诞生!

功能

1. 实现项目快捷交付、版本分支的快捷管理

2. 指定打包编译哪些子应用,逗号分隔多个应用, 支持批量打包

安装

npm  install -g hwms-cli

使用

使用示例:

yarn build             // 交互式选择打包子应用

yarn build pack1,pack2 // 打包子应用pack1、子应用pack2

yarn build --all       // 打包所有子应用

配置之后的package.json显得如此的清爽

"scripts": {
  "serve": "cross-env VUE_APP_BUILD=dev vue-cli-service serve",
  "build": "hwms-cli build", // * 需要配置该命令行 *
  "serve:mock": "cross-env VUE_APP_MOCK=yes VUE_APP_BUILD=dev vue-cli-service serve",
  "build:text": "cross-env VUE_APP_BUILD=release VUE_APP_TEXT=test VUE_APP_TARGET=text vue-cli-service build --mode pr
  "publish:accept-goods:dev": "cross-env vue-cli-service publish --key accept-goods --dest dist/accept-goods --env dev
  "lint": "vue-cli-service lint"
},

文件配置

安装好cli命令行工具包, 并且配置好package.json之后,还有一步至关重要的操作,.
添加 .hipsrcm.js 配置文件

配置文件内容如下

module.exports =  {
    "packages": [
      {
        "name": "accept-goods"
      },
      {
        "name": "associated-site"
      },
      {
        "name": "contanier-search"
      },
      {
        "name": "direct-inbound"
      },
      {
        "name": "direct-outbound"
      },
      {
        "name": "directly-shelves"
      },
      {
        "name": "inventory-transfer"
      },
      {
        "name": "loading"
      },
      {
        "name": "processing-perform"
      },
      {
        "name": "putaway-load"
      },
      {
        "name": "query-batch"
      },
      {
        "name": "receiving-adjustment"
      },
      {
        "name": "secondary-sorting"
      },
      {
        "name": "stock-count"
      },
      {
        "name": "stock-inquiry"
      },
      {
        "name": "stock-query"
      },
      {
        "name": "stock-transfer"
      },
      {
        "name": "subinventory-transfer"
      },
      {
        "name": "unloading"
      },
      {
        "name": "unpicking"
      },
      {
        "name": "unstacking"
      },
      {
        "name": "warehouse-card"
      },
      {
        "name": "wave-picking"
      },
      {
        "name": "receive-adjustment"
      },
      {
        "name": "multi-lpn-pack"
      },
    ],
    "hipsBoot": ".",
  };

这是因为hwms-cli命令在执行的时候, 会去读取该配置文件, 获取项目下所有需要打包的子应用信息.

Cli工具的实现

小编正在整理中, 请移步这里