view-custom-js-coworking-test

v1.5.0

Published

4 years ago

辅助自定义js本地编译项目

Downloads

0High
0Medium
0Low

fenghe-suhui

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 配置拦截规则

alt 设置

开启 https 线上 deepfos 是 https 信任证书，不同操作系统对应不同的证书信任

alt 设置

浏览器代理设置

chrome 请安装浏览器插件 SwitchyOmega https://proxy-switchyomega.com/download/ 新建情景模式代理协议 http 代理服务器(你的 ip) 端口(8899)

alt 设置

其它浏览器，请自行百度

项目使用

开发流程

首先拉取 dev 分支代码，不要直接在 dev 分支开发
从 dev 分支创建个人本地开发分支，命名规范 dev-xxx
提交代码至仓库，直接提交个人本地开发分支

alt 设置

截图中使用的可视化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 内资源管理位置进行文件夹创建

alt 设置

⚠️⚠️⚠️ 注意

页面组件多区域每个区域有对应的 js ，推荐以下结构

我是一个页面
 ┣ 区域1
 ┃ ┗ ModuleScript.jsx
 ┣ 区域2
 ┃ ┗ ModuleScript.jsx
 ┗ 区域3
 ┃ ┗ ModuleScript.jsx

因为当前打包是相关依赖都打包成一个文件，所以会有复杂页面打包时间过长，另外后期文件数量增长，多个文件编译开启时间会超长。考虑到这种情况，项目文件默认为被屏蔽状态，全部不会被编译。需要在想要编译的目录下添加文件 .open 来标记编译，规则如下：

alt 设置

例：

一个文件夹
 ┣ 子文件夹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): 关账管理月份联动

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

view-custom-js-coworking

介绍

开始使用

环境安装

给要编译的文件夹添加.open空文件，不然会报错 : config file must export an options object....

插件下载

项目启动

node命令

项目使用

开发流程

业务代码约定

⚠️⚠️⚠️ 注意

git commit 规范