# @iot-studio/material-loader

> loader

Latest version **0.1.12** (published 2022-06-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install @iot-studio/material-loader
pnpm add @iot-studio/material-loader
yarn add @iot-studio/material-loader
bun add @iot-studio/material-loader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.12 |
| Published | 2022-06-30 |
| First published | 2021-08-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 42.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | xizhi.ljh@alibaba-inc.com |
| Maintainers | iotxfe |

## Links

- npm: https://www.npmjs.com/package/@iot-studio/material-loader
- Repository: git@gitlab.alibaba-inc.com:maliang-group/material-libs
- npm.io page: https://npm.io/package/@iot-studio/material-loader

## Dependencies (1)

- [@iot-studio/material-toolkit-utils](https://npm.io/package/@iot-studio/material-toolkit-utils.md) ^0.1.6

## Recent versions

- 0.1.12 (latest) — 2022-06-30
- 0.1.12-beta.7 (beta) — 2022-06-23
- 0.1.12-beta.6 — 2022-06-23
- 0.1.12-beta.5 — 2022-06-23
- 0.1.12-beta.3 — 2022-06-23
- 0.1.12-beta.2 — 2022-06-23
- 0.1.12-beta.1 — 2022-06-21
- 0.1.12-beta.0 — 2022-06-21
- 0.1.11 — 2022-06-21
- 0.1.10 — 2022-06-21
- 0.1.9 — 2022-06-21
- 0.1.8 — 2022-06-20
- 0.1.7 — 2022-06-20
- 0.1.6 — 2021-09-08
- 0.1.5 — 2021-09-02
- … 5 more at https://npm.io/package/@iot-studio/material-loader/versions

## README

# 基于 fetch 的简易js模块加载器

> fork 自 @bone/loader  [http://gitlab.alibaba-inc.com/bone/floader](http://gitlab.alibaba-inc.com/bone/floader)

## 使用方式
本加载器不需要修改js文件的打包方式，按照以下方式使用。

### 1. 引入加载器
```html
    <script src="//g.alicdn.com/bone/loader/1.1.0/index.js"></script>
```
加载器引入之后，在window上会挂载一个全局的loader函数对象。

### 2. 注册模块
在每个js文件中，加入以下代码
```javascript
    loader.register(module);
```

### 3. 使用模块
```javascript
    const module = loader(moduleId);
```
这里的moduleId默认是js的url地址

### 4. 异步加载一个js文件
```javascript
    loader.async("xxx/yyy.js", function(module){
        // do something
    });

    loader.async([
        "xxx/module1.js",
        "xxx/module2.js"
    ], function(module1, module2){
        // do something
    });
```
### 在html中访问loader
可以在script标签上通过global-name指定loader挂载在window上的名称
```html
    <script src="//g.alicdn.com/bone/loader/1.1.0/index.js" global-name="myLoader"></script>
    <script>
        myLoader.async("xxx.js", function(xxx){ ... });
    </script>
```

### 在js项目中访问loader
通过bnpm安装@bone/loader
```javascript
import loader from "@bone/loader";
loader.async("xxx.js", function(xxx){ ... });
```

## 示例
### a.js
```javascript
    loader.register(1);
```

### b.js
```javascript
    loader.register(2);
```

### main.js
```javascript
    function load(url){
        return new Promise(function(resolve){
            loader.async(url, resolve);
        });
    }

    Promise.all([
        load("a.js"),
        load("b.js")
    ]).then(function(a, b){
        console.log(a + b === 3);
    });
```

## 插件开发
支持以插件的方式修改loader的行为，目前支持以下3个插件修改点

### load
加载一个模块
```javascript
loader.plugin("load", function(info){
    // 修改加载的url
    info.url = "xxx";
    return info;
});
```
### register
注册一个模块
```javascript
loader.plugin("register", function(info){
    // 修改模块ID
    info.moduleId = "xxx";
    return info;
});
```
### get
获取一个模块
```javascript
loader.plugin("get", function(info){
    // 修改模块ID
    info.moduleId = "xxx";
    return info;
});
```

## combo插件
使用combo插件，会对同时发起的多个请求进行合并，减少http请求数

### 引入combo插件
```html
    <script src="//g.alicdn.com/bone/loader/1.1.0/plugins/combo.js"></script>
```

### 效果
```javascript
    loader.async([
        "xxx/module1.js",
        "xxx/module2.js"
    ], function(module1, module2){
        // do something
    });
```
加载两个模块时，实际发出的请求为 `xxx/??module1.js,module2.js`

---
_Source: https://npm.io/package/@iot-studio/material-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._