@litert/loader

Simple browser module loader.

Usage no npm install needed!

<script type="module">
  import litertLoader from 'https://cdn.skypack.dev/@litert/loader';
</script>

README

LiteRT/Loader

npm version npm version npm version License node GitHub issues GitHub Releases GitHub including pre-releases

Simple browser module loader.

Languages

简体中文 | 繁體中文

Features

  • 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.

Installation

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

NPM

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

CDN (recommend)

Recommended: https://cdn.jsdelivr.net/npm/@litert/loader@x.x.x/dist/index.min.js, of course x.x.x is just an example and needs to be changed to the official version number, you can also find it here https://cdn.jsdelivr.net/npm/@litert/loader/.

Also available on unpkg.

Usage

Here's a general how to use it:

<script src="https://cdn.jsdelivr.net/npm/@litert/loader@x.x.x/dist/index.min.js"></script>
// 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);
});

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/seedrandom@3.0.5/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/resize-observer@3.2.0/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 executed: Record<string, any> = {};
let files: Record<string, Blob | string> = {};
if (!Object.keys(files).includes('https://cdn.jsdelivr.net/npm/seedrandom@3.0.5/seedrandom.min.js')) {
    await loader.fetchFiles([
        'https://cdn.jsdelivr.net/npm/seedrandom@3.0.5/seedrandom.min.js'
    ], {
        'files': files
    });
}
let sr = loader.require('seedrandom', files, {
    'executed': executed,
    'map': {
        'seedrandom': 'https://cdn.jsdelivr.net/npm/seedrandom@3.0.5/seedrandom.min'
    }
})[0];

Test

Node

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

Browser

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.

License

This library is published under Apache-2.0 license.