# boundless_static

**Repository Path**: ShoneSingLone/boundless_static

## Basic Information

- **Project Name**: boundless_static
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-22
- **Last Updated**: 2026-04-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

[项目命名规范说明](./readme.ghca.md)

- npm install --global kill-port
- kill-port 3002

## 项目整体说明

m2o 是一个 **多业务静态前端平台 + 自研运行时 + 本地开发/预处理工具链**
的仓库，不是传统意义上“统一打包后再部署”的单体 Vue 项目。

它的核心特点是：

- 业务代码按目录拆分在 `statics/business_*` 下，每个业务都可以独立维护、独立部署。
- 公共能力沉淀在 `statics/common`，包括运行时、基础组件、工具函数和样式资源。
- 页面通常通过业务目录下的 `index.html` 直接加载 `statics/common/libs/seed.js` 启动，再按需异步加载
  `.vue`、路由和公共模块。
- `preprocess/` 目录提供本地 Koa 服务、HMR、i18n、代码检查、部署、文档生成、声明生成等工程能力。

如果把这个仓库拆开理解，可以简单分成两层：

1. **运行时代码**：`statics/` 下的业务与公共前端代码。
2. **工程工具链**：`preprocess/`、`tasks/`、`test/` 等辅助开发、检查、部署和验证的脚本。

## 目录结构速览

### 1. `statics/`

前端主代码目录。

- `statics/business_*`：具体业务应用，每个目录基本可视为一个独立前端子项目。
- `statics/common`：公共层，给所有业务复用。
- `statics/config`：公共配置相关内容。

### 2. `statics/common/`

公共运行时与组件层。

- `libs/`：运行时和全局工具库，例如 `seed.js`、`VueRouter.vue`、`axios.js`、`lodash.js`、`common.ts`。
- `ui-x/`：自研基础组件体系，例如 `xInput`、`xBtn`、`xItem` 等通用 UI 组件。
- `utils/`、`assets/`、`type_*`：公共工具、资源和类型/业务适配层。

### 3. `preprocess/`

工程基础设施目录，不直接承载业务页面，而是服务于开发、检查和交付。

已知能力包括：

- `server/`：本地 Koa 服务、静态资源服务、代理、Socket、HMR。
- `i18n/`：国际化扫描与产物生成。
- `genDeclare/`：声明文件生成。
- `genDocMd/`：文档生成。
- `deploy/`：部署与归档。
- `check/`、`lint/`、`babel/`、`refactor/`：语法检查、格式化、转换与重构辅助。

### 4. 其他常见目录

- `test/`：测试脚本、调试页面、问题复现代码与截图。
- `tasks/`：仓库级任务脚本，如同步、分析、远端交互等。
- `d.ts/`：全局类型声明与生成产物。
- `docs/`、各类 `readme.*.md`：分主题文档说明。

## 业务应用如何启动

一个业务应用通常按下面的链路被加载：

`index.html -> seed.js -> entry.vue -> router/routes.vue -> layout -> views`

以 `statics/business_doc` 为例：

### 1. `index.html`

页面入口文件，通过 `script#src-root` 声明启动参数：

- `src="../common/libs/seed.js"`：加载公共运行时入口。
- `data-app-name="example_app"`：声明当前业务 app 名称。
- `data-app-entry-name="entry"`：声明默认入口组件名，对应 `entry.vue`。
- `data-app-version="..."`：用于静态资源缓存控制。

### 2. `seed.js`

`seed.js`
是整个项目运行时的关键入口，负责读取 HTML 上的数据属性，初始化加载逻辑，并按需拉起业务入口、公共依赖和后续页面资源。

### 3. `entry.vue`

业务初始化入口，通常负责：

- 初始化 UI 能力，例如加载 `useXui.vue`。
- 注册当前业务需要的全局组件。
- 加载 `VueRouter.vue`、`router/routes.vue`、`layout/AppLayout.vue`。
- 预加载业务级 `api.vue`、`opts.vue`、校验规则等公共模块。
- 创建根 Vue 实例并挂载到 `#app`。

### 4. `router/routes.vue`

路由文件负责把 URL 映射到页面组件。以 `business_doc` 为例，路由最终可能指向：

- `views/example_module/list/ViewList.vue`
- `views/example_module/manage/ViewList.vue`
- `views/example_module/manage/ViewDetail.vue`
- `views/example_module/report/ViewList.vue`

所以阅读一个业务时，通常建议顺序为：

1. 先看 `index.html`，确认启动参数。
2. 再看 `entry.vue`，理解初始化了哪些公共能力。
3. 再看 `router/routes.vue`，定位页面入口。
4. 最后沿着 `layout/`、`views/`、`components/` 往下阅读。

## 公共运行时与工具链说明

### 公共运行时

- `statics/common/libs/seed.js`：项目最高优先级的公共启动入口。
- `statics/common/libs/VueRouter.vue`：路由能力封装。
- `statics/common/libs/common.ts`：公共工具函数集合。
- `statics/common/ui-x/`：基础 UI 组件与主题能力。

这些能力通常通过全局方式提供，因此很多业务代码里可以直接使用 `_`、`$`、`Vue` 等全局对象。

### 本地开发服务

`package.json` 中的 `dev` / `watch` 实际都依赖 `preprocess/server/` 下的服务实现。

其中 `preprocess/server/server.js` 负责串联：

- Koa 应用创建
- 代理中间件
- 静态资源服务
- Socket 中间件
- HMR 能力

也就是说，这个仓库的本地开发体验核心并不在 Vite，而在自研的 Koa + Socket + HMR 方案。

### Vite 的角色

`vite.config.js` 当前更偏向于 **库构建 / UMD 转换** 用途，例如将 `preprocess/ES2UMD/make.tsx`
打成 UMD 产物；它不是这个仓库所有业务页面的主启动方式。

## 快速开始

### 1. 安装依赖包

m2o 项目以koa为基础依赖已实现监听代码变动，socket替换Vue组件，自动刷新页面（部分功能待完善，因刷新机制，只能刷新root以下的组件）

- pnpm i

### 2. 脚本命令

#### 语法检查

- `pnpm check business_doc` - 检查指定项目中的 Vue 和 JS 文件语法
- 支持检查指定业务项目，格式：`pnpm check [projectName]`

#### 代码格式化

- `pnpm lint` - 使用 prettier 格式化 statics 目录下的代码
- 支持格式化指定业务项目，格式：`pnpm lint [projectName]`
- 支持格式化 preprocess 目录：`pnpm lint preprocess`
- 支持格式化 common 目录：`pnpm lint common`
- 支持格式化 【绝对路径地址】：`pnpm lint single 【绝对路径地址】`

#### 移除调试语句

- `pnpm remove:debugger` - 移除所有业务项目中的 debugger 语句
- 支持移除指定业务项目中的 debugger 语句，格式：`pnpm remove:debugger [projectName]`

### 3. 启动项目

- business_xxx//业务相关
- commmon//通用

一般需要这两个文件夹，

### 创建项目

- 入口为访问的html页面

```html
    <div style="display: none;" id="preload">
        <!-- 预加载组件，会统一发送请求，提前下载，如无特殊需求，可以不用处理 -->
        return ['@/entry.vue', ...]
    </div>
    ...
	<script
        id="src-root" //固定为src-root
        src="../common/libs/min/seed.js" //libs下有min文件夹，里面的文件经过压缩，gzip处理，可以节约带宽
        data-app-name="example_app" //当前business的appName
        data-app-entry-name="entry"//当前页面加载的root Vue，不配置就会默认为entry.vue;适用同一个business下多个页面的场景
        data-app-version="1738835225753" //如果配置，则会缓存静态资源
        data-no-nprogress="true" //是否隐藏页面顶部的伪进度条，不配置就会显示
    >

```

## 注意事项

- 在vue文件 **template** 中，不可以使用 **`**
- useTabName

## 优化方案

- preprocess\obfuscator\uglify.js 压缩js代码，制作 gzip压缩包。
    - m2o项目默认不开启gzip压缩，需要手动开启。
        - preprocess\server\middleware.appUseKoaAssets.js : isUseGzip

## 部署方案

- preprocess\deploy\example_app\deploy_example_app.js ：压缩项目文件 ，上传服务器，解压
- gzip不会提交到git仓库，只在部署代码里面替换

### data-app-version

- 如果配置data-app-version会缓存静态资源。
- 如果代码有改动，需要修改data-app-version的值，部署后才会更新。
- `npm run update_html_version`

## TODO

- TODO: KEEP_SCROLL_TOP_0//滚动条回到顶部 xItem的Bug 未修复

通过以上优化，项目配置和说明文档更加清晰和规范，减少了潜在的风险，提升了可维护性。

exampleSingleNode

i18n(?<manySuffix>Many)?\((["'`])(示例服务节点)\2\)

i18n$1($2$2)

# 搜索所有分支的历史中包含「func_name」的代码

git grep "func_name" $(git rev-list --all)

# 限定文件类型（比如只搜 .js 文件）

git grep "func_name" $(git rev-list --all) -- '\*.js'

# 显示代码所在的提交哈希、文件、行号

git grep -n "func_name" $(git rev-list --all) -- '\*.vue'

# 找「totalPrice」这个变量被添加/删除的提交（精确匹配）

git log -S"totalPrice" --oneline

# 正则匹配（比如找所有以 get 开头的函数修改）

git log -G"^get.\*" --oneline

# 显示具体修改内容（-p）+ 限定文件

git log -S"totalPrice" -p -- 'src/pages/order/\*.js'