upack

与你前端项目管理工具

usage

• upack -i { name } or upack --init { name } 初始化工作
• upack -b or upack --pack 打包
• upack -p or upack --upm 发布客户端项目
• upack -w or upack --web-deploy 发布静态资源项目
• upack -u -v 3.5.10 or upack --update --ua 3.5.10 更新 3.5.10 版本安卓可获取的应用包
• upack -u -a -v 3.5.10 or upack --update --ios --ua 3.5.10 更新 3.5.10 版本 IOS 可获取的应用包

warn

• -v or --ua是用于设置请求的客户端版本号,zip 包更新规则将按照对应设备后台配置的 ua 获取
• -v 如果不填 默认根据 3.9.9 版本去匹配包,如果不设置 -a 默认通过安卓去匹配
• 自动升级版本号打包,需要参数-v x.x.x的支持,可默认不填,如果需填写,应改写项目内 package.json 文件 upack.pack 命令
• 应用包版本号最大支持一位小数点 1.0 配置 ops 发布逻辑需要设置项目 gitlab tag: upm
• 部署命令upack依赖于ops执行脚本,请保证项目内存在build.sh deplay.sh文件用于执行相应逻辑,对于一般项目,前端项目生成模板已集成
• upack -w依赖oss key, 只有部署服务器才有配置如需修改需要服务端同学修改,gitlab 版本没有相应配置文件
• upack -w命令需要项目配置 package.json文件内webDeploy属性,相应说明如下

"webDeploy": {
    "basePath": "dist",   // 默认为 'dist' 即打包文件所在目录
    "bucket": "yuni-web", // 将要上传oss bucket
    "region": "oss-cn-beijing", // 默认值,一般不用改也不用填
    "targetPath": "", // 即 对应 bucket 下的文件目录 例如 yuni-web-clipper 就是上传至 uneed-file/yuni-web-clipper/目录下
    "files": [
        "/**/*.*"  // 配置需要上传的文件列表 默认值表示上传 ${basePath} 文件下所有文件
    ]
}

explain

upack并没有特别复杂的操作，大概说明一下各命令实现逻辑

• init：根据与你前端项目需求总结了一套基础模板,自动化搭建项目(根据需求选择 是否移动端,是否与你zip包管理项目等生成参数配置)
• pack：将前端项目build后的dist目录按照约定好的目录结构（根据版本号生成）打成一个all.zip包
• upm：将生成的zip信息根据版本号与项目id注入redis中，这时 ops 就能读取到最新的项目版本并可以配置
• web-deploy：将前端build后的资源目录通过oss上传到指定的bucket，除非目录控制，不然没有版本逻辑，上传就是覆盖操作
• update：根据服务端接口通过版本号和设备下载ops配置后最新项目包（匹配后强制删除本地更新为远端的），并生成本次更新后的manifest.json

与你前端初始化模板项目

fork 自 vuejs-templates/webpack修改而来。

说明

1. 添加了大量的说明,去除了不必要的功能与命令
2. 整合了单页面应用与多页面应用
   • config.js中singlePage可设置是否单页面应用true与false
   • 多页面项目时moduleName可设置根目录 默认为page
   • dev环境默认关闭自动打开页面,服务启动后会打印启动页面,点击打开
3. 默认使用 ui 模板为 iPhone7 375宽度 1rem = 100px

关于与你的项目

• 移动端

  • 与你应用内项目 与你项目页面(例如wallet) 版本控制,依赖@uneed/jsbridge-webview执行环境

    与你小应用(例如chatlat-live) 版本控制,依赖@uneed/jsbridge-webview与@uneed/jsbridge-runtime执行环境,跟普通项目区别于workers/open.js,即通过runtime执行环境初始化小应用逻辑

    与你远端页面(例如web-clipper) 应用内远端页面,线上静态页面, 依赖yuni-browser-jsbridge.js执行环境,通过 upack -w发布管理

  • 应用外项目(例如yuni-web-share) 线上静态页面, 依赖yuni-browser-jsbridge.js执行环境,通过 upack -w发布管理

• PC 端
  线上静态页面,不依赖@uneed执行环境,通过 upack -w发布管理

关于 rem 计算

// px 方式
document.documentElement.style.fontSize = document.documentElement.clientWidth / 3.75 + 'px'
// vw 方式
document.documentElement.style.fontSize = 100 / 3.75 + 'vw'
/*
    这样写逻辑很简单
    我们的设计标准图是 375px(也可以说是标准设备宽度), 为了方便计算 先暂定转换比例 1rem = 100px
    那么我们的设计宽度就是 3.75rem  (如果设计图是 750px  那么设计宽度就是 7.5rem)
    那么如何实现不同设备的宽度等比例于标准设备宽度呢?

    我们先求出标准3.75rem设计宽度下,我们的可得到的转换比例
    推导 (3.75rem * 转换比例px/rem = 设备宽度px) => (设备宽度 / 3.75 = 转换比例) =>
    => document.documentElement.clientWidth / 3.75  这就是我们求得的转换比例
    => 也就是 375(标准设备宽度) / 3.75 = 100 即375设备下,我们的基准是100 1rem=100px
    => 其他设备 / 标准设备 = 其他比例 / 100(基准比例) = 实际比例  => 实际比例 * 100 = 实际转换比例

    ui设计图永远都是基准设备 即1rem = 100px 所以 ui 60pt计算就是 60 / 100 = 0.6rem

    如果是vw  就是 100 / 3.75 + 'vw' (100就是设备宽度,vw的意义就是100vw等于document.documentElement.clientWidth+'px')
*/