Simple browser module loader.

简体中文 | 繁體中文

• Supports running code in memory.
• The configuration is simple and lightweight.
• No intrusion and does not affect the script label.
• Support the CommonJS / ES6 Module format.
• The fetch function is automatically supported without additional loading.
• Support TypeScript.

This is a module for browsers and eventually needs to be referenced by the script tag.

You can install directly using NPM:

$ npm i @litert/loader --save

Or install the developing (unstable) version for newest features:

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

Recommended: https://cdn.jsdelivr.net/npm/@litert/[email protected]/dist/loader.min.js, you can also find it here https://cdn.jsdelivr.net/npm/@litert/loader/.

Also available on unpkg.

Here's a general how to use it:

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

The code hint needs to be added in "tsconfig.json":

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

All actions are written in the "ready" callback.

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

Alternatively, use ?path= to load the ingress file directly, the js file extension can be omitted.

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

Use the ?cdn= parameter to set the source address of the third library load, default is: https://cdn.jsdelivr.net.

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

Use the ?map= parameter to set the path to the third-party library, a JSON string, that is valid only with the path parameter.

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

Using the ?npm= parameter loader will automatically go to npm to find the relevant library for sniffing loading, JSON string, module name and version number, only valid with the path parameter.

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

You can use the fetchFiles method to load network files into memory.

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

Use sniffFiles to load network files into the memory, and sniff the inclusion relationship in the file, such as js import, require, etc., CSS url, etc.

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

Using the map option, you can specify the alias of the library, the alias of the import command is also based on this.

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];

After compiling the TS code, execute: node dist/test-on-node to observe the execution results of the test code under node.

Use the browser to visit "test/" to view the comparison results are the same as in the node environment.

You can also click here to access the example online.

This library is published under Apache-2.0 license.