vite-add-cdn-script 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +109 -0
- package/dist/index.js +88 -0
- package/dist/index.umd.cjs +26 -0
- package/index.d.ts +7 -0
- package/package.json +49 -0
package/README.md
ADDED
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
# vite-add-cdn-script
|
|
2
|
+
|
|
3
|
+
这是一个在vite.js中使用公共cdn的库，包括了"bootcdn", "bytedance", "unpkg", "cdnjs", "jsdelivr", "staticfile"等多个cdn资源，如加载失败会自动切换下一个cdn进行加载。
|
|
4
|
+
|
|
5
|
+
## 开始
|
|
6
|
+
|
|
7
|
+
### 安装
|
|
8
|
+
|
|
9
|
+
```
|
|
10
|
+
pnpm install vite-add-cdn-script rollup-plugin-external-globals -D
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
### 使用
|
|
14
|
+
|
|
15
|
+
vite.config.ts
|
|
16
|
+
|
|
17
|
+
```typescript
|
|
18
|
+
import { defineConfig } from "vite";
|
|
19
|
+
import react from "@vitejs/plugin-react";
|
|
20
|
+
import viteAddCdnScript from "../vite-add-cdn-script/lib/main";
|
|
21
|
+
import externalGlobals from "rollup-plugin-external-globals";
|
|
22
|
+
|
|
23
|
+
// 需要使用cdn库
|
|
24
|
+
const externals = {
|
|
25
|
+
react: "React",
|
|
26
|
+
"react-dom": "ReactDOM",
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
export default defineConfig({
|
|
30
|
+
plugins: [
|
|
31
|
+
react(),
|
|
32
|
+
viteAddCdnScript({}),
|
|
33
|
+
],
|
|
34
|
+
build: {
|
|
35
|
+
rollupOptions: {
|
|
36
|
+
external: [...Object.keys(externals)],
|
|
37
|
+
plugins: [externalGlobals(externals)],
|
|
38
|
+
},
|
|
39
|
+
},
|
|
40
|
+
});
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
使用自定义的cdn
|
|
46
|
+
|
|
47
|
+
```typescript
|
|
48
|
+
import { defineConfig } from "vite";
|
|
49
|
+
import react from "@vitejs/plugin-react";
|
|
50
|
+
import viteAddCdnScript from "../vite-add-cdn-script/lib/main";
|
|
51
|
+
import externalGlobals from "rollup-plugin-external-globals";
|
|
52
|
+
|
|
53
|
+
const externals = {
|
|
54
|
+
react: "React",
|
|
55
|
+
"react-dom": "ReactDOM",
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
export default defineConfig({
|
|
59
|
+
plugins: [
|
|
60
|
+
react(),
|
|
61
|
+
viteAddCdnScript({
|
|
62
|
+
customScript: {
|
|
63
|
+
react: "<script src='https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js'></script>",
|
|
64
|
+
"react-dom": "<script src='https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js'></script>",
|
|
65
|
+
},
|
|
66
|
+
}),
|
|
67
|
+
],
|
|
68
|
+
base: "./",
|
|
69
|
+
build: {
|
|
70
|
+
rollupOptions: {
|
|
71
|
+
external: [...Object.keys(externals)],
|
|
72
|
+
plugins: [externalGlobals(externals)],
|
|
73
|
+
},
|
|
74
|
+
},
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
options
|
|
82
|
+
|
|
83
|
+
| 参数 | 解析 | 类型 | 默认值 |
|
|
84
|
+
| ------------ | ----------------- | --------------------------- | ------------------------------------------------------------ |
|
|
85
|
+
| protocol | 协议 | “http”\|“https” | https |
|
|
86
|
+
| customScript | 自定义cdn脚本 | { [*key*: string]: string } | 无 |
|
|
87
|
+
| retryTimes | 重试次数 | number | 3 |
|
|
88
|
+
| defaultCdns | 默认使用cdn的顺序 | string[] | ["bootcdn", "bytedance", "unpkg", "cdnjs", "jsdelivr", "staticfile"] |
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
## 注意事项
|
|
93
|
+
|
|
94
|
+
因为cdn对包管理的命名有很大的不同，默认是使用了xxx.min.js的文件，如果您使用的库的cdn文件不是这个的话，则需要配置为自定义的cdn。
|
|
95
|
+
|
|
96
|
+
目前做了适配的非xxx.min.js适配的库如下，如果你有合适的cdn源或者，需要适配的库，欢迎提交issue或者pr！！！
|
|
97
|
+
|
|
98
|
+
```
|
|
99
|
+
{
|
|
100
|
+
react: "umd/react.production.min.js",
|
|
101
|
+
"react-dom": "umd/react-dom.production.min.js",
|
|
102
|
+
"react-router-dom": "react-router-dom.production.min.js",
|
|
103
|
+
mobx: "mobx.umd.production.min.js",
|
|
104
|
+
"mobx-react": "mobxreact.umd.production.min.js",
|
|
105
|
+
vue: "vue.global.min.js",
|
|
106
|
+
"vue-router": "vue-router.global.prod.min.js",
|
|
107
|
+
}
|
|
108
|
+
```
|
|
109
|
+
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import N from "node:path";
|
|
2
|
+
import v from "node:fs";
|
|
3
|
+
const d = {
|
|
4
|
+
unpkg: "unpkg.com",
|
|
5
|
+
bytedance: "lf26-cdn-tos.bytecdntp.com/cdn",
|
|
6
|
+
staticfile: "cdn.staticfile.net",
|
|
7
|
+
cdnjs: "cdnjs.cloudflare.com/ajax/libs",
|
|
8
|
+
jsdelivr: "cdn.jsdelivr.net/npm",
|
|
9
|
+
bootcdn: "cdn.bootcdn.net/ajax/libs"
|
|
10
|
+
}, i = {
|
|
11
|
+
unpkg: "@",
|
|
12
|
+
bytedance: "/",
|
|
13
|
+
staticfile: "/",
|
|
14
|
+
cdnjs: "/",
|
|
15
|
+
jsdelivr: "@",
|
|
16
|
+
bootcdn: "/"
|
|
17
|
+
}, u = {
|
|
18
|
+
react: "umd/react.production.min.js",
|
|
19
|
+
"react-dom": "umd/react-dom.production.min.js",
|
|
20
|
+
"react-router-dom": "react-router-dom.production.min.js",
|
|
21
|
+
mobx: "mobx.umd.production.min.js",
|
|
22
|
+
"mobx-react": "mobxreact.umd.production.min.js",
|
|
23
|
+
vue: "vue.global.min.js",
|
|
24
|
+
"vue-router": "vue-router.global.prod.min.js"
|
|
25
|
+
};
|
|
26
|
+
function C(p) {
|
|
27
|
+
const {
|
|
28
|
+
protocol: l = "https",
|
|
29
|
+
customScript: c = {},
|
|
30
|
+
retryTimes: m = 3,
|
|
31
|
+
defaultCdns: f = ["bootcdn", "bytedance", "unpkg", "cdnjs", "jsdelivr", "staticfile"]
|
|
32
|
+
} = p;
|
|
33
|
+
let o;
|
|
34
|
+
return {
|
|
35
|
+
name: "vite-add-cdn-script",
|
|
36
|
+
enforce: "pre",
|
|
37
|
+
apply: "build",
|
|
38
|
+
config(e) {
|
|
39
|
+
o = e;
|
|
40
|
+
},
|
|
41
|
+
transformIndexHtml(e) {
|
|
42
|
+
const b = N.resolve(process.cwd(), "package.json");
|
|
43
|
+
try {
|
|
44
|
+
const r = "bootcdn", j = v.readFileSync(b, "utf-8"), a = JSON.parse(j), g = o.build.rollupOptions.external;
|
|
45
|
+
let n = "" + `<script>
|
|
46
|
+
const separators = JSON.parse('${JSON.stringify(i)}');
|
|
47
|
+
const cdnUrlObj = JSON.parse('${JSON.stringify(d)}');
|
|
48
|
+
const defaultCdns = JSON.parse('${JSON.stringify(f)}');
|
|
49
|
+
function errorCDN(e) {
|
|
50
|
+
const nextCur = parseInt(e.getAttribute("data-cur")) + 1;
|
|
51
|
+
if(nextCur>=${m}){return;}
|
|
52
|
+
const filename = e.getAttribute("data-filename");
|
|
53
|
+
const key = e.getAttribute("data-key");
|
|
54
|
+
const urlName = defaultCdns[nextCur]
|
|
55
|
+
// 组装新的cdn链接
|
|
56
|
+
const url = location.protocol + "//" + cdnUrlObj[urlName] + "/" + key + separators[urlName] + filename;
|
|
57
|
+
// 克隆原标签
|
|
58
|
+
const tagName = e.tagName
|
|
59
|
+
const cdnDOM = document.createElement(tagName);
|
|
60
|
+
cdnDOM.setAttribute(tagName === 'SCRIPT' ?'src' : 'href', url);
|
|
61
|
+
Object.keys(e.dataset).forEach(_key => {
|
|
62
|
+
cdnDOM.setAttribute('data-'+_key, e.dataset[_key]);
|
|
63
|
+
})
|
|
64
|
+
cdnDOM.setAttribute("data-cur", nextCur.toString());
|
|
65
|
+
cdnDOM.setAttribute("onerror", "errorCDN(this)");
|
|
66
|
+
document.head.appendChild(cdnDOM);
|
|
67
|
+
e.remove();
|
|
68
|
+
}
|
|
69
|
+
<\/script>`;
|
|
70
|
+
return Object.keys(a.dependencies).forEach((t) => {
|
|
71
|
+
if (g.includes(t))
|
|
72
|
+
if (c[t])
|
|
73
|
+
n += c[t];
|
|
74
|
+
else {
|
|
75
|
+
const s = a.dependencies[t].replace("^", "") + "/" + (u[t] ? u[t] : `${t}.min.js`), O = `${l}://${d[r]}/${t}${i[r]}${s}`;
|
|
76
|
+
n += `<script src="${O}" type="text/javascript" onerror="errorCDN(this)" data-cur="0" data-key="${t}" data-filename="${s}"><\/script>
|
|
77
|
+
`;
|
|
78
|
+
}
|
|
79
|
+
}), e = e.replace("</head>", `${n}</head>`), e;
|
|
80
|
+
} catch (r) {
|
|
81
|
+
console.error("获取dependencies出错:", r);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
}
|
|
86
|
+
export {
|
|
87
|
+
C as default
|
|
88
|
+
};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
(function(t,n){typeof exports=="object"&&typeof module<"u"?module.exports=n(require("node:path"),require("node:fs")):typeof define=="function"&&define.amd?define(["node:path","node:fs"],n):(t=typeof globalThis<"u"?globalThis:t||self,t.index=n(t.path,t.fs))})(this,function(t,n){"use strict";const s={unpkg:"unpkg.com",bytedance:"lf26-cdn-tos.bytecdntp.com/cdn",staticfile:"cdn.staticfile.net",cdnjs:"cdnjs.cloudflare.com/ajax/libs",jsdelivr:"cdn.jsdelivr.net/npm",bootcdn:"cdn.bootcdn.net/ajax/libs"},a={unpkg:"@",bytedance:"/",staticfile:"/",cdnjs:"/",jsdelivr:"@",bootcdn:"/"},d={react:"umd/react.production.min.js","react-dom":"umd/react-dom.production.min.js","react-router-dom":"react-router-dom.production.min.js",mobx:"mobx.umd.production.min.js","mobx-react":"mobxreact.umd.production.min.js",vue:"vue.global.min.js","vue-router":"vue-router.global.prod.min.js"};function m(f){const{protocol:b="https",customScript:i={},retryTimes:j=3,defaultCdns:g=["bootcdn","bytedance","unpkg","cdnjs","jsdelivr","staticfile"]}=f;let u;return{name:"vite-add-cdn-script",enforce:"pre",apply:"build",config(r){u=r},transformIndexHtml(r){const O=t.resolve(process.cwd(),"package.json");try{const c="bootcdn",N=n.readFileSync(O,"utf-8"),p=JSON.parse(N),x=u.build.rollupOptions.external;let o=""+`<script>
|
|
2
|
+
const separators = JSON.parse('${JSON.stringify(a)}');
|
|
3
|
+
const cdnUrlObj = JSON.parse('${JSON.stringify(s)}');
|
|
4
|
+
const defaultCdns = JSON.parse('${JSON.stringify(g)}');
|
|
5
|
+
function errorCDN(e) {
|
|
6
|
+
const nextCur = parseInt(e.getAttribute("data-cur")) + 1;
|
|
7
|
+
if(nextCur>=${j}){return;}
|
|
8
|
+
const filename = e.getAttribute("data-filename");
|
|
9
|
+
const key = e.getAttribute("data-key");
|
|
10
|
+
const urlName = defaultCdns[nextCur]
|
|
11
|
+
// 组装新的cdn链接
|
|
12
|
+
const url = location.protocol + "//" + cdnUrlObj[urlName] + "/" + key + separators[urlName] + filename;
|
|
13
|
+
// 克隆原标签
|
|
14
|
+
const tagName = e.tagName
|
|
15
|
+
const cdnDOM = document.createElement(tagName);
|
|
16
|
+
cdnDOM.setAttribute(tagName === 'SCRIPT' ?'src' : 'href', url);
|
|
17
|
+
Object.keys(e.dataset).forEach(_key => {
|
|
18
|
+
cdnDOM.setAttribute('data-'+_key, e.dataset[_key]);
|
|
19
|
+
})
|
|
20
|
+
cdnDOM.setAttribute("data-cur", nextCur.toString());
|
|
21
|
+
cdnDOM.setAttribute("onerror", "errorCDN(this)");
|
|
22
|
+
document.head.appendChild(cdnDOM);
|
|
23
|
+
e.remove();
|
|
24
|
+
}
|
|
25
|
+
<\/script>`;return Object.keys(p.dependencies).forEach(e=>{if(x.includes(e))if(i[e])o+=i[e];else{const l=p.dependencies[e].replace("^","")+"/"+(d[e]?d[e]:`${e}.min.js`),h=`${b}://${s[c]}/${e}${a[c]}${l}`;o+=`<script src="${h}" type="text/javascript" onerror="errorCDN(this)" data-cur="0" data-key="${e}" data-filename="${l}"><\/script>
|
|
26
|
+
`}}),r=r.replace("</head>",`${o}</head>`),r}catch(c){console.error("获取dependencies出错:",c)}}}}return m});
|
package/index.d.ts
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "vite-add-cdn-script",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"keywords": [
|
|
5
|
+
"vite",
|
|
6
|
+
"cdn",
|
|
7
|
+
"cdn-script",
|
|
8
|
+
"auto-add-cdn",
|
|
9
|
+
"vite-add-cdn-script"
|
|
10
|
+
],
|
|
11
|
+
"description": "A plugin for vite to add cdn script to index.html",
|
|
12
|
+
"repository": {
|
|
13
|
+
"type": "git",
|
|
14
|
+
"url": "git+https://github.com/baizeteam/baize-vite-plugin.git"
|
|
15
|
+
},
|
|
16
|
+
"homepage": "https://github.com/baizeteam/baize-vite-plugin/tree/master/package/vite-add-cdn-script#readme",
|
|
17
|
+
"author": "baizeteam",
|
|
18
|
+
"type": "module",
|
|
19
|
+
"files": [
|
|
20
|
+
"dist",
|
|
21
|
+
"index.d.ts"
|
|
22
|
+
],
|
|
23
|
+
"main": "./dist/index.umd.cjs",
|
|
24
|
+
"module": "./dist/index.js",
|
|
25
|
+
"types": "./index.d.ts",
|
|
26
|
+
"exports": {
|
|
27
|
+
"types": "./index.d.ts",
|
|
28
|
+
"import": "./dist/index.js",
|
|
29
|
+
"require": "./dist/index.js"
|
|
30
|
+
},
|
|
31
|
+
"scripts": {
|
|
32
|
+
"dev": "vite",
|
|
33
|
+
"build": "tsc && vite build"
|
|
34
|
+
},
|
|
35
|
+
"devDependencies": {
|
|
36
|
+
"@types/node": "^20.12.11",
|
|
37
|
+
"@types/react": "^18.3.2",
|
|
38
|
+
"@types/react-dom": "^18.3.0",
|
|
39
|
+
"@vitejs/plugin-react": "^4.2.1",
|
|
40
|
+
"react": "^18.3.1",
|
|
41
|
+
"react-dom": "^18.3.1",
|
|
42
|
+
"rollup-plugin-node-externals": "^7.1.2",
|
|
43
|
+
"typescript": "^5.4.5",
|
|
44
|
+
"vite": "^5.2.11"
|
|
45
|
+
},
|
|
46
|
+
"publishConfig": {
|
|
47
|
+
"registry": "https://registry.npmjs.org/"
|
|
48
|
+
}
|
|
49
|
+
}
|