web/loader
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
loader/README.md

3.1 KiB
Raw Permalink Blame History

@apigo.cc/loader 模块调度中心

@apigo.cc/loader 是整个 @apigo.cc 体系的入口调度中心。它负责根据当前环境自动生成 importmap，并管理各模块的版本。

一、 集成方式

直接引用打包好的 loader.min.js，它会自动根据当前的加载源适配 CDN 镜像。

1. 自动注入 Importmap

在 HTML 中引入 loader 并声明需要加载的模块：

<!-- 引入 loader -->
<script src="https://cdn.jsdelivr.net/npm/@apigo.cc/loader@1.0.0/dist/loader.min.js"></script>

<script>
    // 定义需要使用的模块，自动生成 importmap
    // 支持格式: 'name' 或 'name:version'
    // 也可以使用标签模式: 'name:latest', 'name:beta' 等
    Loader.load('state:1.0.11', 'bootstrap:1.0.2', 'base:1.0.7');
</script>

<!-- 随后即可使用原生 import -->
<script type="module">
    import { $ } from '@apigo.cc/state';
    import { Bootstrap } from '@apigo.cc/bootstrap';
    
    console.log('Ready');
</script>

2. 原生朴素写法 (手动定义)

如果您不想使用 Loader.load 的自动注入，也可以手动定义 importmap：

<script type="importmap">
{
  "imports": {
    "@apigo.cc/state": "https://cdn.jsdelivr.net/npm/@apigo.cc/state@1.0.11/dist/state.min.js",
    "@apigo.cc/bootstrap": "https://cdn.jsdelivr.net/npm/@apigo.cc/bootstrap@1.0.2/dist/bootstrap.min.js"
  }
}
</script>

<script type="module">
    import { $ } from '@apigo.cc/state';
    // ... 业务代码
</script>

二、 核心特性

  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 开发服务器：

// 重定向 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 版本：

// 恢复为 CDN 版本
localStorage.removeItem('dev:@apigo.cc/bootstrap');
localStorage.removeItem('dev:@apigo.cc/state');

四、 支持模块清单

所有模块均发布在 @apigo.cc 组织下：

  • state (原子状态机)
  • bootstrap (UI 引擎)
  • base (常用控件库)
  • datatable (高性能表格)
  • kanban (看板)
  • mindmap (思维导图)
  • chart (图表)
  • editor (代码编辑器)