# dynamic-loading-script

> Dynamic script loading.

Latest version **1.0.9** (published 2023-09-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install dynamic-loading-script
pnpm add dynamic-loading-script
yarn add dynamic-loading-script
bun add dynamic-loading-script
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2023-09-11 |
| First published | 2023-02-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 14.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | guoshuangyang@qq.com |
| Maintainers | gsy-yang |
| Keywords | dynamic, loader, script, esm |

## Links

- npm: https://www.npmjs.com/package/dynamic-loading-script
- Repository: https://github.com/guoshuangyang/dynamic-loading-script
- Homepage: https://github.com/guoshuangyang/dynamic-loading-script#readme
- Issues: https://github.com/guoshuangyang/dynamic-loading-script/issues
- npm.io page: https://npm.io/package/dynamic-loading-script

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.0.9 (latest) — 2023-09-11
- 1.0.8 — 2023-08-21
- 1.0.7 — 2023-08-14
- 1.0.6 — 2023-05-15
- 1.0.5 — 2023-02-17
- 1.0.4 — 2023-02-17

## README

# dynamic-loading-script

动态加载脚本，并根据脚本的加载情况，执行回调函数。
+ 如果脚本已经加载，直接执行回调函数，避免重复加载
+ 如果脚本未加载，先加载脚本，再执行回调函数



### 注意事项
+ 异步加载js - 如果js已经加载过，则直接返回 如果cdn不是直接返回js类方法，而是采用jsonp的方式, 请务必传入jsonpCallbackName参数

## 安装

``` bash
npm install dynamic-loading-script --save
```

``` bash
yarn add dynamic-loading-script --save
```

## 使用

### 参数

| 参数                   | 类型            | 说明                                                         | 默认值 | 必填 |
| ---------------------- | --------------- | ------------------------------------------------------------ | ------ | ---- |
| Url                    | String          | 脚本的url地址                                                | 无     | 是   |
| opts                   | Object          | 配置项                                                       | 无     | 是   |
| opts.variableName      | String          | 脚本中的变量名，如果脚本中有变量名，可以通过该参数获取到该变量 | 无     | 是   |
| opts.callback          | Function        | 脚本加载完成后的回调函数, 此属性存在时                       | 无     | 否   |
| opts.jsonpCallbackName | String          | 脚本的jsonp方法名                                            | 无     | 否   |
| opts.timeout           | number | 是否在超时之后移除script标签                                 | false  | 否   |


**使用jsonp的形式参见[jsonp示例](./example/index.js)**


``` javascript
// 引入改js后，可以直接获取js库变量（类）的例子,
import dynamicLoadScript from 'dynamic-loading-script'

dynamicLoadScript('https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js', {
    variableName: 'axios',
    callback:(axios) => {
        console.log('axios loaded', axios)
        console.log('axios', window.axios)
    }
})
```


``` javascript

import dynamicLoadScript from "dynamic-loading-script";
dynamicLoadScript( "https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.min.js",
  {
    variableName: "echarts",
  }
).then((echarts) => {
  console.log(echarts);
});

```



### 注意

+ $已经为window已存在的变量，故动态加载jquery不会成功

---
_Source: https://npm.io/package/dynamic-loading-script · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._