view-custom-js-coworking-test v1.5.0
view-custom-js-coworking
介绍
东区技术组前端 deepfos 工作空间
- 适应 deepfos 自定义 JS ModuleScript 开发方式
- 由于复杂代码需要编译放入系统执行,所以在本仓库进行未编译代码管理,追踪,审查
- 基于 view-custom-js 额外做了业务代码规范约定,同步 merge view-custom-js 新的特性
开始使用
环境安装
- 项目包管理使用 pnpm,首先安装 pnpm
给要编译的文件夹添加.open空文件,不然会报错 : config file must export an options object....
插件下载
pnpm install
项目启动
pnpm dev
- 安装 whistle 并启动, 用来拦截 deepfos 线上 js 替换成本项目编译的 js
// 安装代理服务
npm install -g whistle
// 启动代理服务 (默认端口:8899) w2 -p 8888(指定端口)
w2 start
node命令
node bin/tool.js -c 清除 src 下 .open node bin/tool.js -o 清除 src 下 .close node bin/tool.js -co 清除 src 下 .open 和 .close
http://localhost:8899 进入 whistle 配置拦截规则
开启 https 线上 deepfos 是 https 信任证书,不同操作系统对应不同的证书信任
- 浏览器代理设置
chrome 请安装浏览器插件 SwitchyOmega https://proxy-switchyomega.com/download/ 新建情景模式 代理协议 http 代理服务器(你的 ip) 端口(8899)
其它浏览器,请自行百度
项目使用
开发流程
首先拉取 dev 分支代码,不要直接在 dev 分支开发
从 dev 分支创建个人本地开发分支,命名规范 dev-xxx
提交代码至仓库,直接提交个人本地开发分支
截图中使用的可视化git工具 Fork
相关 APP 业务功能完成或者需要人协同维护,请在 gitee 工作台通过代码评审将个人开发分支合并到 dev, dev 为保护分支,无法直接 push
评审人选择管理员
业务代码约定
约定每个功能的出口都是 ModuleScript.jsx/ts/js/jsx
相关功能 以及 App内的位置 用文件夹来指示
projects
┣ alpha-Demo
┃ ┣ App1
┃ ┃ ┣ demo1
┃ ┃ ┃ ┗ ModuleScript.jsx
┃ ┃ ┣ demo2
┃ ┃ ┃ ┗ ModuleScript.jsx
┃ ┃ ┗ demo3
┃ ┃ ┃ ┗ ModuleScript.jsx
┃ ┗ App2
┃ ┃ ┣ demo1
┃ ┃ ┃ ┗ ModuleScript.jsx
┃ ┃ ┗ demo2
┗ alpha-Demo2
┃ ┣ App1
┃ ┃ ┣ demo1
┃ ┃ ┃ ┗ ModuleScript.jsx
┃ ┃ ┗ demo2
┃ ┗ App2
┃ ┃ ┣ demo1
┃ ┃ ┃ ┗ ModuleScript.jsx
┃ ┃ ┗ demo2
projects 为项目根目录 alpha-Demo 为环境空间,命名规范 环境-空间 ,例:alpha-Demo / alpha-Heytea / test.in-Demo1 App1 为空间内 App 命名,例:基金管理DEMO / 锦江人力预算项目DEMO
App 层文件夹内推荐按照 App 内资源管理位置进行文件夹创建
⚠️⚠️⚠️ 注意
- 页面组件 多区域 每个区域有对应的 js ,推荐以下结构
我是一个页面
┣ 区域1
┃ ┗ ModuleScript.jsx
┣ 区域2
┃ ┗ ModuleScript.jsx
┗ 区域3
┃ ┗ ModuleScript.jsx
- 因为当前打包是相关依赖都打包成一个文件,所以会有复杂页面打包时间过长,另外后期文件数量增长,多个文件编译开启时间会超长。考虑到这种情况,项目文件默认为被屏蔽状态,全部不会被编译。需要在想要编译的目录下添加文件
.open
来标记编译,规则如下:
例:
一个文件夹
┣ 子文件夹1
┃ ┣ 功能1
┃ ┃ ┣ .close
┃ ┃ ┗ ModuleScript.jsx
┃ ┣ 功能2
┃ ┃ ┗ ModuleScript.jsx
┃ ┗ .open
┣ 子文件夹2
┃ ┣ 功能1
┃ ┃ ┣ .open
┃ ┃ ┗ ModuleScript.jsx
┃ ┗ 功能2
┃ ┃ ┗ ModuleScript.jsx
┗ 子文件夹3
┃ ┣ 功能1
┃ ┃ ┗ ModuleScript.jsx
┃ ┗ 功能2
┃ ┃ ┗ ModuleScript.jsx
子文件夹1-功能2 / 子文件夹2-功能1 会被编译
git commit 规范
# 主要type
feat: 增加新功能
fix: 修复bug
update: 业务内容更改
# 特殊type
docs: 只改动了文档相关的内容
style: 不影响代码含义的改动,例如去掉空格、改变缩进、增删分号
pub: 静态文件相关改动
refactor: 代码重构时使用
# 其他type
build: 构造工具的或者外部依赖的改动,例如webpack,npm
chore: 不修改src或者test的其余修改,例如构建过程或辅助工具的变动
test: 添加测试或者修改现有测试
perf: 提高性能的改动
ci: 与CI(持续集成服务)有关的改动
revert: 恢复先前的提交
Git commit日志基本规范
// 基本格式
<type>[<scope>](<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>
<type> (必须)操作类型
[<scope>] (可选)⚠️ 业务代码必须标识 环境空间指定
(<scope>) (可选)⚠️ 业务代码必须标识 App指定
<subject> (必须)commit 主题 概述 50个字符以内
<body> (可选)commit 主体内容 更详细的说明文本 72个字符以内
<footer> (可选)commit 如果需要的化可以添加一个链接到issue地址或者其它文档,或者关闭某个issue
具体示例
feat[alpha-Demo1](App1): 关账管理功能
fix[alpha-Demo1](App1): 关账管理功能接口返回数据类型
python 2.0 接口返回数据更改,由 str 改为 obj
update[alpha-Demo1](App1): 关账管理月份联动