Skip to content

Latest commit

 

History

History
168 lines (124 loc) · 5.02 KB

README.sc.md

File metadata and controls

168 lines (124 loc) · 5.02 KB
Raw

Loader

License NPM stable version GitHub releases GitHub issues

轻量易用的运行于浏览器的模块加载器。

语言

English | 繁體中文

特性

  • 支持直接运行内存中的文件代码。
  • 库轻量，配置简单。
  • 无侵入，不会对您的 script 引入的其他库造成任何影响。
  • 支持 CommonJS、ES6 Module 格式。
  • 自动支持 fetch 函数，无需额外加载。
  • 支持 TypeScript。

安装

这是运行于浏览器的库，因此只需要使用 script 标签引用即可。

NPM

可以直接使用 npm 下载库到本地：

$ npm i @litert/loader --save

可以安装最新的开发版到本地：

$ npm i @litert/loader@dev --save

CDN（推荐）

推荐引用地址：https://cdn.jsdelivr.net/npm/@litert/[email protected]/dist/index.min.js，也可以此处查找：https://cdn.jsdelivr.net/npm/@litert/loader/。

同样可使用 unpkg。

Usage

通常的使用方式：

<script src="https://cdn.jsdelivr.net/npm/@litert/[email protected]/dist/index.min.js"></script>

代码提示需要在“tsconfig.json”中添加：

{
    "compilerOptions": {
        ...
        "typeRoots": [
            "./node_modules/@types",
            "./node_modules/@litert/loader"
        ]
    }
}

所有操作请写在 ready 回调函数当中。

loader.ready(function() {
    let files: Record<string, Blob | string> = { ... };
    let tmodule: any, module2: any;
    [tmodule, module2] = loader.require(['../dist/tmodule', './module2'], files);
});

或者使用 ?path= 直接加载入口 js 文件，js 后缀可省略。

<script src="https://cdn.jsdelivr.net/npm/@litert/[email protected]/dist/index.min.js?path=../lib/test"></script>

使用 ?cdn= 参数设置第三库加载的源地址，默认为：https://cdn.jsdelivr.net。

<script src="https://cdn.jsdelivr.net/npm/@litert/[email protected]/dist/index.min.js?cdn=https://cdn.xxx.xxx"></script>

使用 ?map= 参数设置第三方库的路径，JSON 字符串，仅在含有 path 参数下有效。

<script src="https://cdn.jsdelivr.net/npm/@litert/[email protected]/dist/index.min.js?&path=xxx&map={'xxx':'https://xx/npm/index'}"></script>

使用 ?npm= 参数 loader 将自动去 npm 查找相关的库进行嗅探加载，JSON 字符串，模块名跟版本号，仅在含有 path 参数下有效。

<script src="https://cdn.jsdelivr.net/npm/@litert/[email protected]/dist/index.min.js?&path=xxx&npm={'xxx':'1.0.0'}"></script>

你可以使用 fetchFiles 方法加载网络文件到内存。

let files: Record<string, Blob | string> = await loader.fetchFiles([
    '../dist/tmodule.js',
    './module2.js',
    'https://cdn.jsdelivr.net/npm/[email protected]/seedrandom.min.js'
]);

使用 sniffFiles 加载网络文件到内存，会嗅探文件中的包含关系，例如 js 的 import、require 等，CSS 的 url 等。

let files: Record<string, Blob | string> = {};
await loader.sniffFiles([
    'https://cdn.jsdelivr.net/npm/@juggle/[email protected]/lib/exports/resize-observer.js'
], {
    'files': files
});

使用 map 选项，可以指定库的别名，import 命令的别名也以此为依据。

let cache: Record<string, any> = {};
let files: Record<string, Blob | string> = {};
if (!Object.keys(files).includes('https://cdn.jsdelivr.net/npm/[email protected]/seedrandom.min.js')) {
    await loader.fetchFiles([
        'https://cdn.jsdelivr.net/npm/[email protected]/seedrandom.min.js'
    ], {
        'files': files
    });
}
let sr = loader.require('seedrandom', files, {
    'cache': cache,
    'map': {
        'seedrandom': 'https://cdn.jsdelivr.net/npm/[email protected]/seedrandom.min',
        '~/': './'
    }
})[0];

测试

Node

编译 TS 代码之后，可以直接执行 node dist/test-on-node 来观察在 node 环境中默认的运行结果。

浏览器

使用浏览器访问“test/”来查看比对结果与 node 环境中相同。

你也可以直接点这里在线查看浏览器示例。

许可

这个库的许可为 Apache-2.0。