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

2.0 KiB
Raw Permalink Blame History

@web/loader 模块调度中心

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

一、 集成方式

方式一：内联引导 (推荐 - 无额外请求)

在 HTML 的 <head> 顶部加入以下代码。这种方式不需要额外请求 loader.min.js 文件。

<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 模板进行调度。

<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 (图表)