2026-06-03 18:48:56 +08:00
|
|
|
|
# @apigo.cc/loader 模块调度中心
|
2026-05-30 09:55:25 +08:00
|
|
|
|
|
2026-06-03 18:48:56 +08:00
|
|
|
|
`@apigo.cc/loader` 是整个 `@apigo.cc` 体系的入口调度中心。它负责根据当前环境自动生成 `importmap`,并管理各模块的版本。
|
2026-05-30 09:55:25 +08:00
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 一、 集成方式
|
|
|
|
|
|
|
2026-06-03 18:48:56 +08:00
|
|
|
|
直接引用打包好的 `loader.min.js`,它会自动根据当前的加载源适配 CDN 镜像。
|
|
|
|
|
|
|
|
|
|
|
|
### 1. 自动注入 Importmap
|
|
|
|
|
|
在 HTML 中引入 loader 并声明需要加载的模块:
|
2026-05-30 09:55:25 +08:00
|
|
|
|
|
|
|
|
|
|
```html
|
2026-06-03 18:48:56 +08:00
|
|
|
|
<!-- 引入 loader -->
|
2026-06-03 18:54:31 +08:00
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/@apigo.cc/loader@1.0.1/dist/loader.min.js"></script>
|
2026-06-03 18:48:56 +08:00
|
|
|
|
|
2026-05-30 09:55:25 +08:00
|
|
|
|
<script>
|
2026-06-03 18:48:56 +08:00
|
|
|
|
// 定义需要使用的模块,自动生成 importmap
|
|
|
|
|
|
// 支持格式: 'name' 或 'name:version'
|
|
|
|
|
|
// 也可以使用标签模式: 'name:latest', 'name:beta' 等
|
2026-06-03 18:54:31 +08:00
|
|
|
|
Loader.load('state:1.0.11', 'bootstrap:1.0.3', 'base:1.0.7');
|
2026-06-03 18:48:56 +08:00
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 随后即可使用原生 import -->
|
|
|
|
|
|
<script type="module">
|
|
|
|
|
|
import { $ } from '@apigo.cc/state';
|
|
|
|
|
|
import { Bootstrap } from '@apigo.cc/bootstrap';
|
|
|
|
|
|
|
|
|
|
|
|
console.log('Ready');
|
2026-05-30 09:55:25 +08:00
|
|
|
|
</script>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
2026-06-03 18:48:56 +08:00
|
|
|
|
### 2. 原生朴素写法 (手动定义)
|
|
|
|
|
|
如果您不想使用 `Loader.load` 的自动注入,也可以手动定义 `importmap`:
|
2026-05-30 09:55:25 +08:00
|
|
|
|
|
|
|
|
|
|
```html
|
2026-06-03 18:48:56 +08:00
|
|
|
|
<script type="importmap">
|
|
|
|
|
|
{
|
|
|
|
|
|
"imports": {
|
|
|
|
|
|
"@apigo.cc/state": "https://cdn.jsdelivr.net/npm/@apigo.cc/state@1.0.11/dist/state.min.js",
|
2026-06-03 18:54:31 +08:00
|
|
|
|
"@apigo.cc/bootstrap": "https://cdn.jsdelivr.net/npm/@apigo.cc/bootstrap@1.0.3/dist/bootstrap.min.js"
|
2026-06-03 18:48:56 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script type="module">
|
|
|
|
|
|
import { $ } from '@apigo.cc/state';
|
|
|
|
|
|
// ... 业务代码
|
2026-05-30 09:55:25 +08:00
|
|
|
|
</script>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 二、 核心特性
|
|
|
|
|
|
|
2026-06-03 18:48:56 +08:00
|
|
|
|
1. **多镜像自适应**:自动识别 `loader.min.js` 的来源 URL,并自动将其他模块指向相同的 CDN 镜像。支持以下镜像:
|
|
|
|
|
|
* `cdn.jsdelivr.net` (默认)
|
|
|
|
|
|
* `esm.sh`
|
|
|
|
|
|
* `unpkg.com`
|
|
|
|
|
|
* `unpkg.zhimg.com` (中国加速)
|
|
|
|
|
|
* `npm.elemecdn.com` (中国加速)
|
|
|
|
|
|
2. **默认版本管理**:内置了各组件的稳定版本号,无需手动记忆。
|
|
|
|
|
|
3. **零配置**:只需一行代码即可完成整个生态链的模块映射。
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 三、 本地开发与调试重定向
|
|
|
|
|
|
|
|
|
|
|
|
在本地开发时,如果需要将某些模块重定向到本地开发服务器进行调试,可以通过在浏览器控制台设置 `localStorage` 来实现,**无需修改任何 HTML 业务代码**。
|
|
|
|
|
|
|
|
|
|
|
|
### 1. 启用本地调试重定向
|
|
|
|
|
|
比如将 `bootstrap` 和 `state` 模块重定向到您本地运行的 Vite 开发服务器:
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
// 重定向 bootstrap 模块
|
|
|
|
|
|
localStorage.setItem('dev:@apigo.cc/bootstrap', 'http://localhost:5173/src/index.js');
|
|
|
|
|
|
|
|
|
|
|
|
// 重定向 state 模块
|
|
|
|
|
|
localStorage.setItem('dev:@apigo.cc/state', 'http://localhost:5174/src/index.js');
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### 2. 取消本地调试重定向
|
|
|
|
|
|
调试完成后,清除 `localStorage` 对应的键即可恢复使用 CDN 版本:
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
// 恢复为 CDN 版本
|
|
|
|
|
|
localStorage.removeItem('dev:@apigo.cc/bootstrap');
|
|
|
|
|
|
localStorage.removeItem('dev:@apigo.cc/state');
|
|
|
|
|
|
```
|
2026-05-30 09:55:25 +08:00
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
2026-06-03 18:48:56 +08:00
|
|
|
|
## 四、 支持模块清单
|
|
|
|
|
|
所有模块均发布在 `@apigo.cc` 组织下:
|
2026-05-30 09:55:25 +08:00
|
|
|
|
* `state` (原子状态机)
|
|
|
|
|
|
* `bootstrap` (UI 引擎)
|
|
|
|
|
|
* `base` (常用控件库)
|
2026-06-03 18:48:56 +08:00
|
|
|
|
* `datatable` (高性能表格)
|
2026-05-30 09:55:25 +08:00
|
|
|
|
* `kanban` (看板)
|
|
|
|
|
|
* `mindmap` (思维导图)
|
|
|
|
|
|
* `chart` (图表)
|
2026-06-03 18:48:56 +08:00
|
|
|
|
* `editor` (代码编辑器)
|