118 lines
4.6 KiB
Markdown
118 lines
4.6 KiB
Markdown
# @apigo.cc/loader 模块调度中心
|
||
|
||
`@apigo.cc/loader` 是整个 `@apigo.cc` 体系的入口调度中心。它负责根据当前环境自动生成 `importmap`，并管理各模块的版本。
|
||
|
||
---
|
||
|
||
## 一、 集成方式
|
||
|
||
### 1. 引入 Loader (任选一个 CDN 镜像复制即用)
|
||
直接引用打包好的 `loader.min.js`，它会自动根据当前的加载源适配 CDN 镜像：
|
||
|
||
```html
|
||
<!-- jsDelivr (默认推荐) -->
|
||
<script src="https://cdn.jsdelivr.net/npm/@apigo.cc/loader@1.0.3/dist/loader.min.js"></script>
|
||
|
||
<!-- esm.sh -->
|
||
<script src="https://esm.sh/@apigo.cc/loader@1.0.3/dist/loader.min.js"></script>
|
||
|
||
<!-- unpkg.com -->
|
||
<script src="https://unpkg.com/@apigo.cc/loader@1.0.3/dist/loader.min.js"></script>
|
||
|
||
<!-- unpkg.zhimg.com (中国加速) -->
|
||
<script src="https://unpkg.zhimg.com/@apigo.cc/loader@1.0.3/dist/loader.min.js"></script>
|
||
|
||
<!-- npm.elemecdn.com (中国加速) -->
|
||
<script src="https://npm.elemecdn.com/@apigo.cc/loader@1.0.3/dist/loader.min.js"></script>
|
||
```
|
||
|
||
### 2. 自动注入 Importmap (支持做减法)
|
||
在 HTML 中引入任意一个镜像的 loader，并声明加载所有已有项目模块（在实际生产中可按需做减法删除不需要的项）：
|
||
|
||
```html
|
||
<script src="https://cdn.jsdelivr.net/npm/@apigo.cc/loader@1.0.3/dist/loader.min.js"></script>
|
||
<script>
|
||
// 声明需要使用的模块，自动生成 importmap (版本号在 build 时由脚本自动同步至最新)
|
||
Loader.load('state:1.0.12','bootstrap:1.0.4','base:1.0.8','datatable:1.0.7','kanban:1.0.1','mindmap:1.0.1','chart:1.0.1','editor:1.0.1');
|
||
</script>
|
||
|
||
<!-- 随后即可使用原生 import -->
|
||
<script type="module">
|
||
// 核心开发范例：导入核心状态、UI 引擎以及最核心的 UI/网络基建 (base)
|
||
import { NewState, LocalStorage } from '@apigo.cc/state';
|
||
import { Bootstrap } from '@apigo.cc/bootstrap';
|
||
import { HTTP, UI } from '@apigo.cc/base';
|
||
|
||
// 1. 初始化配色与深色模式绑定
|
||
Bootstrap.config({ primary: '#6366f1' });
|
||
Bootstrap.bindDarkMode(LocalStorage, 'darkMode');
|
||
|
||
// 2. 使用 base 提供的全局 UI 能力
|
||
UI.toast('系统已成功加载');
|
||
|
||
// 3. 使用 base 提供的 HTTP 请求工具
|
||
HTTP.get('/api/status').then(res => {
|
||
console.log('API Response:', res);
|
||
});
|
||
</script>
|
||
```
|
||
|
||
### 3. 原生朴素写法 (手动定义)
|
||
如果您不想使用 `Loader.load` 的自动注入，也可以手动定义 `importmap`（同样可以通过直接删除无用项来做减法）：
|
||
|
||
```html
|
||
<script type="importmap">
|
||
{
|
||
"imports": {
|
||
"@apigo.cc/state": "https://cdn.jsdelivr.net/npm/@apigo.cc/state@1.0.12/dist/state.min.js",
|
||
"@apigo.cc/bootstrap": "https://cdn.jsdelivr.net/npm/@apigo.cc/bootstrap@1.0.4/dist/bootstrap.min.js",
|
||
"@apigo.cc/base": "https://cdn.jsdelivr.net/npm/@apigo.cc/base@1.0.8/dist/base.min.js",
|
||
"@apigo.cc/datatable": "https://cdn.jsdelivr.net/npm/@apigo.cc/datatable@1.0.7/dist/datatable.min.js",
|
||
"@apigo.cc/kanban": "https://cdn.jsdelivr.net/npm/@apigo.cc/kanban@1.0.1/dist/kanban.min.js",
|
||
"@apigo.cc/mindmap": "https://cdn.jsdelivr.net/npm/@apigo.cc/mindmap@1.0.1/dist/mindmap.min.js",
|
||
"@apigo.cc/chart": "https://cdn.jsdelivr.net/npm/@apigo.cc/chart@1.0.1/dist/chart.min.js",
|
||
"@apigo.cc/editor": "https://cdn.jsdelivr.net/npm/@apigo.cc/editor@1.0.1/dist/editor.min.js"
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<script type="module">
|
||
import { NewState } from '@apigo.cc/state';
|
||
import { HTTP, UI } from '@apigo.cc/base';
|
||
// ... 业务代码
|
||
</script>
|
||
```
|
||
|
||
---
|
||
|
||
## 二、 本地开发与调试重定向
|
||
|
||
在本地开发时，如果需要将某些模块重定向到您本地的开发服务器（例如 Vite 本地服务），**只需在 `Loader.load` 对应的模块中传入本地 URL 或相对路径**。`Loader` 内部会自动识别并将其作为自定义地址使用：
|
||
|
||
```javascript
|
||
Loader.load('state:1.0.12',
|
||
'bootstrap:http://localhost:5173/src/index.js', // 调试重定向：指向本地 Vite 源码服务
|
||
'base:1.0.7','datatable:1.0.7','kanban:1.0.1','mindmap:1.0.1','chart:1.0.1','editor:1.0.1');
|
||
```
|
||
|
||
---
|
||
|
||
## 三、 核心特性
|
||
|
||
1. **多镜像自适应**：自动识别 `loader.min.js` 的来源 URL，并自动将其他模块指向相同的 CDN 镜像。
|
||
2. **默认版本管理**：内置了各组件的稳定版本号，无需手动记忆。
|
||
3. **零配置**：只需一行代码即可完成整个生态链的模块映射。
|
||
|
||
---
|
||
|
||
## 四、 支持模块清单
|
||
所有模块均发布在 `@apigo.cc` 组织下：
|
||
* `state` (原子状态机)
|
||
* `bootstrap` (UI 引擎)
|
||
* `base` (常用控件库)
|
||
* `datatable` (高性能表格)
|
||
* `kanban` (看板)
|
||
* `mindmap` (思维导图)
|
||
* `chart` (图表)
|
||
* `editor` (代码编辑器)
|