# cdn-accessor

> - 异步加载 - 按需引入 - 缓存 - 接口请求自动合并 - 可拓展（js、css、vue2、vue3、react、......）

Latest version **0.0.5** (published 2022-04-21) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install cdn-accessor
pnpm add cdn-accessor
yarn add cdn-accessor
bun add cdn-accessor
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2022-04-21 |
| First published | 2022-04-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 116.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | panbo |

## Links

- npm: https://www.npmjs.com/package/cdn-accessor
- npm.io page: https://npm.io/package/cdn-accessor

## Dependencies (1)

- [@xiaoe/venus](https://npm.io/package/@xiaoe/venus.md) ^0.5.38-t220415

## Recent versions

- 0.0.5 (latest) — 2022-04-21
- 0.0.4 — 2022-04-20
- 0.0.3 — 2022-04-19
- 0.0.2 — 2022-04-18
- 0.0.1 — 2022-04-18

## README

## Feature

-   异步加载
-   按需引入
-   缓存
-   接口请求自动合并
-   可拓展（js、css、vue2、vue3、react、......）

## Usage

### 实例化

**accessor.js**

```js
import { createAccessor } from 'cdn-accessor'
const accessor = createAccessor({
	app_id: '',
	modules: [
		{
			id: 'testFunc',
			deps: ['https://code.jquery.com/jquery-3.6.0.min.js'],
			suffixes: ['chunk.umd.js']
		},
		{
			id: 'test-button',
			deps: [
				'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js',
				'https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css',
				'https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js'
			],
			suffixes: ['chunk.umd.js', 'test-button.css']
		},
		{
			id: 'overflow-popover',
			deps: [
				'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js',
				'https://unpkg.com/element-ui/lib/index.js',
				'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
			],
			suffixes: ['chunk.umd.js', 'style.css']
		},
		{
			id: 'ReactPopup',
			deps: [
				'https://unpkg.com/react@17/umd/react.production.min.js',
				'https://unpkg.com/react-dom@17/umd/react-dom.production.min.js'
			],
			suffixes: ['chunk.umd.js']
		}
	]
})
export default accessor
```

modules
| name | type | description |
|----------|----------|---------------------------------------------------|
| id | `string` | 模块唯一标识。必传。 |
| deps | `string[]` | 模块依赖，没有时传空数组`[]`。考虑到各依赖之间可能有严格的引入顺序要求，将按数组顺序串行引入。 |
| suffixes | `string[]` | 模块打包文件名，用来拼接 url。必传且可传多个，并行引入。 |

### 异步&按需 引入

get 函数入参为组件 id，返回一个 Promise 对象。

#### js 中引入 。

```js
import accessor from 'xxx/accessor'
accessor.get('testFunc').then(testFunc => {
	console.log('testFunc: ', testFunc)
})
```

#### Vue 框架中引入异步组件。

组件内注册（推荐）。

```html
<template>
	<OverflowPopover></OverflowPopover>
</template>
<script>
	import accessor from 'xxx/accessor'
	export default {
		components: {
			OverflowPopover: () => accessor.get('overflow-popover')
		}
	}
</script>
```

或全局注册。

```js
import Vue from 'vue'
import accessor from 'xxx/accessor'
Vue.component('GoodsSelector', () => accessor.get('goods-selector'))
```

### 自定义数据接口

| name    | type                                                                                             | description                                          |
| ------- | ------------------------------------------------------------------------------------------------ | ---------------------------------------------------- |
| fetcher | `(modules: {id: string;deps: string[];suffixes: string[]}[])=>Promise<Record<string, string[]>>` | 自定义数据接口函数。可不传。不传时使用默认 fetcher。 |

**accessor.js**

```js
import { createAccessor } from 'cdn-accessor'
import axios from 'axios'
const accessor = createAccessor({
	app_id: 'xxxxx',
	fetcher(modules) {
		const params = {
			ids: modules.map(({ id }) => id).join(',')
		}
		return axios.get('http://xxxxxx/xxxxxx', { params }).then(({ data }) => {
			if (data.code === 0) {
				return data.data
			}
			return Promise.reject(data)
		})
	},
	modules: [
		{
			id: 'goods-selector',
			deps: [
				'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js',
				'https://unpkg.com/element-ui/lib/index.js',
				'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
			],
			suffixes: ['goods-selector.css', 'goods-selector.umd.js']
		}
	]
})
```

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