59 lines
2.0 KiB
Markdown
59 lines
2.0 KiB
Markdown
|
# @web/loader 模块调度中心
|
||
|
|
|
||
|
|
`@web/loader` 是整个 `@web` 体系的入口调度中心。它负责根据当前环境自动生成 `importmap`，并管理各模块的版本。
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 一、 集成方式
|
||
|
|
|
||
|
|
### 方式一：内联引导 (推荐 - 无额外请求)
|
||
|
|
在 HTML 的 `<head>` 顶部加入以下代码。这种方式不需要额外请求 `loader.min.js` 文件。
|
||
|
|
|
||
|
|
```html
|
||
|
|
<script>
|
||
|
|
(function __load(tpl, ...pkgs) {
|
||
|
|
const DEFAULT_VERSIONS = { state: 'v1.0.11', bootstrap: 'v1.0.1', base: 'v1.0.7' };
|
||
|
|
const importMap = { imports: {} };
|
||
|
|
pkgs.forEach(pkg => {
|
||
|
|
const [name, version] = pkg.split(':');
|
||
|
|
const v = version || DEFAULT_VERSIONS[name] || 'main';
|
||
|
|
importMap.imports[`@web/${name}`] = tpl.replace(/{project}/g, name).replace(/{tag}/g, v);
|
||
|
|
});
|
||
|
|
const s = document.createElement('script');
|
||
|
|
s.type = 'importmap';
|
||
|
|
s.textContent = JSON.stringify(importMap);
|
||
|
|
document.currentScript.parentNode.insertBefore(s, document.currentScript);
|
||
|
|
})('https://apigo.cc/web/{project}/raw/tag/{tag}/dist/{project}.js', 'state', 'bootstrap', 'base');
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
|
||
|
|
### 方式二：引用外部 Loader
|
||
|
|
直接引用打包好的 `loader.min.js`。它会自动根据当前的 URL 模板进行调度。
|
||
|
|
|
||
|
|
```html
|
||
|
|
<script src="https://apigo.cc/web/loader/raw/tag/v1.0.0/dist/loader.min.js"></script>
|
||
|
|
<script>
|
||
|
|
// 无需版本号，自动使用内置的默认版本
|
||
|
|
Loader.load('state', 'bootstrap', 'base');
|
||
|
|
</script>
|
||
|
|
```
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 二、 核心特性
|
||
|
|
|
||
|
|
1. **智能模板 (Smart Templating)**：自动根据 `loader.js` 的加载路径推断其他组件的下载路径。
|
||
|
|
2. **默认版本 (Default Versioning)**：构建时内置了 `@web` 家族各成员的推荐稳定版本，解决“版本选择困难症”。
|
||
|
|
3. **按需加载 (On-demand)**：在页面头部一次性声明所需模块，避免加载无关资源。
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 三、 支持模块清单
|
||
|
|
* `state` (原子状态机)
|
||
|
|
* `bootstrap` (UI 引擎)
|
||
|
|
* `base` (常用控件库)
|
||
|
|
* `dataTable` (高性能表格)
|
||
|
|
* `kanban` (看板)
|
||
|
|
* `mindmap` (思维导图)
|
||
|
|
* `chart` (图表)
|