vite-plugin-external-cdn 1.0.0

package/LICENSE

@@ -0,0 +1,15 @@
+ISC LICENSE
+
+Copyright 2023-PRESENT ZuoJt
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED “AS IS” AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,132 @@
+<div align="center">
+  <a href="https://vitejs.dev/">
+    <img width="200" height="200" hspace="10" src="https://vitejs.dev/logo.svg" alt="vite logo" />
+  </a>
+  <h1>Vite External CDN</h1>
+  <p>
+    A <a href="https://vitejs.dev/">Vite</a> plugin to convert dependencies to cdn at build time usingPlugin for <a href="https://github.com/eight04/rollup-plugin-external-globals">rollup-plugin-external-globals</a>.
+  </p>
+</div>
+
+## Installation
+
+Install the plugin with npm:
+
+```
+npm install vite-plugin-external-cdn --save-dev
+```
+
+or yarn
+
+```
+yarn add vite-plugin-external-cdn -D
+```
+
+## Basic Usage
+
+Add it to vite.config.js
+
+```js
+// vite.config.js
+import reactRefresh from '@vitejs/plugin-react-refresh'
+import transformExternalCDN from 'vite-plugin-external-cdn'
+
+export default {
+    plugins: [
+      transformExternalCDN({
+            modules: [
+                {
+                    name: 'react',
+                    var: 'React',
+                    path: `umd/react.production.min.js`,
+                },
+                {
+                    name: 'react-dom',
+                    var: 'ReactDOM',
+                    path: `umd/react-dom.production.min.js`,
+                },
+            ],
+        }),
+    ],
+}
+```
+
+### Use autoComplete
+
+```js
+// vite.config.js
+import reactRefresh from '@vitejs/plugin-react-refresh'
+import transformExternalCDN, { autoComplete } from 'vite-plugin-external-cdn'
+
+export default {
+    plugins: [
+      transformExternalCDN({
+            modules: [
+                autoComplete('react'),
+                autoComplete('react-dom')
+            ],
+        }),
+        reactRefresh(),
+    ],
+}
+```
+
+### Autocomplete supported modules
+
+```
+"react" | "react-dom" | "react-router-dom" | 
+"antd" | "ahooks" | "@ant-design/charts" | 
+"vue" | "vue2" | "@vueuse/shared" | 
+"@vueuse/core" | "moment" | 
+"eventemitter3" | "file-saver" | 
+"browser-md5-file" | "xlsx | "crypto-js" |
+"axios" | "lodash" | "localforage"
+```
+
+### VueUse demo
+
+```js
+import vue from '@vitejs/plugin-vue'
+import importToCDN, { autoComplete } from 'vite-plugin-cdn-import'
+
+export default {
+    plugins: [
+        vue(),
+        importToCDN({
+            modules: [
+                autoComplete('vue'), // vue2 use autoComplete('vue2')
+                autoComplete('@vueuse/shared'),
+                autoComplete('@vueuse/core')
+            ],
+        }),
+    ],
+}
+```
+
+## Options
+
+| Name    | Description                                                                                  | Type            | Default                                                |
+| ------- | -------------------------------------------------------------------------------------------- | --------------- | ------------------------------------------------------ |
+| prodUrl | Overrides the global prodUrl, allowing you to specify the CDN location for a specific module | string          | <https://cdn.jsdelivr.net/npm/{name}@{version}/{path}> |
+| modules | Modules config                                                                               | Array`<Module>` / Array`<(prodUrl:string) => Module>` | -                                                      |
+
+### Module
+
+| Name | Description                                                                           | Type              |
+| ---- | ------------------------------------------------------------------------------------- | ----------------- |
+| name | The name of the module you want to externalize                                        | string            |
+| var  | A variable that will be assigned to the module in global scope, Rollup requires this  | string            |
+| path | Specify the load path on the CDN                                                      | string / string[] |
+| css  | You can alternatively specify multiple style sheets which will be loaded from the CDN | string / string[] |
+
+## Other CDN prodUrl
+
+| Name  | pordUrl                                                  |
+| ----- | -------------------------------------------------------- |
+| unpkg | //unpkg.com/{name}@{version}/{path}                      |
+| cdnjs | //cdnjs.cloudflare.com/ajax/libs/{name}/{version}/{path} |
+
+## Resources
+
+- [webpack-cdn-plugin](https://github.com/shirotech/webpack-cdn-plugin)
+- [rollup-plugin-external-globals](https://github.com/eight04/rollup-plugin-external-globals)

package/dist/index.d.mts

@@ -0,0 +1,138 @@
+import { PluginOption } from 'vite';
+
+interface Module {
+    name: string;
+    var: string;
+    path: string | string[];
+    version?: string;
+    css?: string | string[];
+}
+interface Options {
+    modules: (Module | ((prodUrl: string) => Module))[];
+    prodUrl?: string;
+}
+
+declare function transformExternalCDN(options: Options): PluginOption | PluginOption[];
+
+declare const modulesConfig: {
+    react: {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    'react-dom': {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    'react-router-dom': {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    antd: {
+        var: string;
+        jsdeliver: {
+            path: string;
+            css: string;
+        };
+    };
+    ahooks: {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    '@ant-design/charts': {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    vue: {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    vue2: {
+        var: string;
+        jsdeliver: {
+            name: string;
+            path: string;
+        };
+    };
+    '@vueuse/shared': {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    '@vueuse/core': {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    moment: {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    eventemitter3: {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    'file-saver': {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    'browser-md5-file': {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    xlsx: {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    axios: {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    lodash: {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    'crypto-js': {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    localforage: {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+};
+type ModuleName = keyof typeof modulesConfig;
+declare function autoComplete(name: ModuleName): (prodUrl: string) => Module;
+
+export { Options, transformExternalCDN as PluginExternalCDN, autoComplete, transformExternalCDN as default };

package/dist/index.d.ts

@@ -0,0 +1,138 @@
+import { PluginOption } from 'vite';
+
+interface Module {
+    name: string;
+    var: string;
+    path: string | string[];
+    version?: string;
+    css?: string | string[];
+}
+interface Options {
+    modules: (Module | ((prodUrl: string) => Module))[];
+    prodUrl?: string;
+}
+
+declare function transformExternalCDN(options: Options): PluginOption | PluginOption[];
+
+declare const modulesConfig: {
+    react: {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    'react-dom': {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    'react-router-dom': {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    antd: {
+        var: string;
+        jsdeliver: {
+            path: string;
+            css: string;
+        };
+    };
+    ahooks: {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    '@ant-design/charts': {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    vue: {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    vue2: {
+        var: string;
+        jsdeliver: {
+            name: string;
+            path: string;
+        };
+    };
+    '@vueuse/shared': {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    '@vueuse/core': {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    moment: {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    eventemitter3: {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    'file-saver': {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    'browser-md5-file': {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    xlsx: {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    axios: {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    lodash: {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    'crypto-js': {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+    localforage: {
+        var: string;
+        jsdeliver: {
+            path: string;
+        };
+    };
+};
+type ModuleName = keyof typeof modulesConfig;
+declare function autoComplete(name: ModuleName): (prodUrl: string) => Module;
+
+export { Options, transformExternalCDN as PluginExternalCDN, autoComplete, transformExternalCDN as default };

package/dist/index.js

@@ -0,0 +1,312 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  PluginExternalCDN: () => transformExternalCDN,
+  autoComplete: () => autoComplete,
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/transform.ts
+var import_rollup_plugin_external_globals = __toESM(require("rollup-plugin-external-globals"));
+var fs = __toESM(require("fs"));
+var path = __toESM(require("path"));
+var process = __toESM(require("process"));
+
+// src/utils.ts
+var isFullPath = (path2) => {
+  return path2.startsWith("http:") || path2.startsWith("https:") || path2.startsWith("//");
+};
+var generateUrl = (url, data) => {
+  const { name, version, path: path2 } = data;
+  if (isFullPath(path2)) {
+    url = path2;
+  }
+  return url.replace(/\{name\}/g, name).replace(/\{version\}/g, version).replace(/\{path\}/g, path2);
+};
+
+// src/transform.ts
+function getDepsVersion(name) {
+  const pwd = process.cwd();
+  const pkg = path.join(pwd, "node_modules", name, "package.json");
+  if (name && fs.existsSync(pkg)) {
+    const pkgJson = JSON.parse(fs.readFileSync(pkg, "utf8"));
+    return pkgJson.version;
+  }
+  return "";
+}
+function generateExternals(options) {
+  const { modules = [], prodUrl = "https://cdn.jsdelivr.net/npm/{name}@{version}/{path}" } = options;
+  return modules.map((m) => {
+    let v;
+    if (typeof m === "function") {
+      v = m(prodUrl);
+    } else {
+      v = m;
+    }
+    const version = getDepsVersion(v.name);
+    let pathList = [];
+    if (!Array.isArray(v.path)) {
+      pathList.push(v.path);
+    } else {
+      pathList = v.path;
+    }
+    const data = {
+      ...v,
+      version
+    };
+    pathList = pathList.map((p) => {
+      if (!version && !isFullPath(p)) {
+        throw new Error(`modules: ${data.name} package.json file does not exist`);
+      }
+      return generateUrl(prodUrl, {
+        ...data,
+        path: p
+      });
+    });
+    let css = v.css || [];
+    if (!Array.isArray(css) && css) {
+      css = [css];
+    }
+    const cssList = !Array.isArray(css) ? [] : css.map(
+      (c) => generateUrl(prodUrl, {
+        ...data,
+        path: c
+      })
+    );
+    return {
+      ...v,
+      version,
+      pathList,
+      cssList
+    };
+  });
+}
+function transformExternalCDN(options) {
+  let isBuild = false;
+  const externalMap = {};
+  const externals = generateExternals(options);
+  externals.forEach((v) => {
+    externalMap[v.name] = v.var;
+  });
+  const externalLibs = Object.keys(externalMap);
+  const plugin = [
+    {
+      name: "vite-plugin-external-cdn",
+      enforce: "post",
+      apply: "build",
+      ...(0, import_rollup_plugin_external_globals.default)(externalMap)
+    },
+    {
+      config(config, { command }) {
+        const userConfig = {
+          build: {
+            rollupOptions: {}
+          }
+        };
+        if (command === "build") {
+          isBuild = true;
+          userConfig.build.rollupOptions = {
+            external: [...externalLibs]
+          };
+        } else {
+          isBuild = false;
+        }
+        return userConfig;
+      },
+      transformIndexHtml(html) {
+        const cssCode = externals.map((v) => v.cssList.map((css) => `<link href="${css}" rel="stylesheet">`).join("\n")).filter((v) => v).join("\n");
+        const jsCode = !isBuild ? "" : externals.map((p) => p.pathList.map((url) => `<script src="${url}"></script>`).join("\n")).join("\n");
+        return html.replace(/<\/title>/i, `</title>${cssCode}
+${jsCode}`);
+      }
+    }
+  ];
+  return plugin;
+}
+
+// src/preset.ts
+var modulesConfig = {
+  react: {
+    var: "React",
+    jsdeliver: {
+      path: "umd/react.production.min.js"
+    }
+  },
+  "react-dom": {
+    var: "ReactDOM",
+    jsdeliver: {
+      path: "umd/react-dom.production.min.js"
+    }
+  },
+  "react-router-dom": {
+    var: "ReactRouterDOM",
+    jsdeliver: {
+      path: "umd/react-router-dom.min.js"
+    }
+  },
+  antd: {
+    var: "antd",
+    jsdeliver: {
+      path: "dist/antd.min.js",
+      css: "dist/antd.min.css"
+    }
+  },
+  ahooks: {
+    var: "ahooks",
+    jsdeliver: {
+      path: "dist/ahooks.js"
+    }
+  },
+  "@ant-design/charts": {
+    var: "charts",
+    jsdeliver: {
+      path: "dist/charts.min.js"
+    }
+  },
+  vue: {
+    var: "Vue",
+    jsdeliver: {
+      path: "dist/vue.global.prod.js"
+    }
+  },
+  vue2: {
+    var: "Vue",
+    jsdeliver: {
+      name: "vue",
+      path: "dist/vue.runtime.min.js"
+    }
+  },
+  "@vueuse/shared": {
+    var: "VueUse",
+    jsdeliver: {
+      path: "index.iife.min.js"
+    }
+  },
+  "@vueuse/core": {
+    var: "VueUse",
+    jsdeliver: {
+      path: "index.iife.min.js"
+    }
+  },
+  moment: {
+    var: "moment",
+    jsdeliver: {
+      path: "moment.min.js"
+    }
+  },
+  eventemitter3: {
+    var: "EventEmitter3",
+    jsdeliver: {
+      path: "umd/eventemitter3.min.js"
+    }
+  },
+  "file-saver": {
+    var: "window",
+    jsdeliver: {
+      path: "dist/FileSaver.min.js"
+    }
+  },
+  "browser-md5-file": {
+    var: "browserMD5File",
+    jsdeliver: {
+      path: "dist/index.umd.min.js"
+    }
+  },
+  xlsx: {
+    var: "XLSX",
+    jsdeliver: {
+      path: "dist/xlsx.full.min.js"
+    }
+  },
+  axios: {
+    var: "axios",
+    jsdeliver: {
+      path: "dist/axios.min.js"
+    }
+  },
+  lodash: {
+    var: "_",
+    jsdeliver: {
+      path: "lodash.min.js"
+    }
+  },
+  "crypto-js": {
+    var: "crypto-js",
+    jsdeliver: {
+      path: "crypto-js.min.js"
+    }
+  },
+  localforage: {
+    var: "localforage",
+    jsdeliver: {
+      path: "dist/localforage.min.js"
+    }
+  }
+};
+function isJsdeliver(prodUrl) {
+  return prodUrl.includes("//cdn.jsdelivr.net");
+}
+function isUnpkg(prodUrl) {
+  return prodUrl.includes("//unpkg.com");
+}
+function isCdnjs(prodUrl) {
+  return prodUrl.includes("//cdnjs.cloudflare.com");
+}
+function autoComplete(name) {
+  const config = modulesConfig[name];
+  if (!config) {
+    throw new Error(`The configuration of module ${name} does not exist `);
+  }
+  return (prodUrl) => {
+    if (isCdnjs(prodUrl)) {
+      throw new Error(`The configuration of module ${name} in ${prodUrl} does not exist `);
+    } else {
+      if (!(isJsdeliver(prodUrl) || isUnpkg(prodUrl))) {
+        console.warn("Unknown prodUrl, using the jsdeliver rule");
+      }
+      return {
+        name,
+        var: config.var,
+        ...config.jsdeliver
+      };
+    }
+  };
+}
+
+// src/index.ts
+var src_default = transformExternalCDN;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PluginExternalCDN,
+  autoComplete
+});

package/dist/index.mjs

@@ -0,0 +1,274 @@
+// src/transform.ts
+import externalGlobals from "rollup-plugin-external-globals";
+import * as fs from "fs";
+import * as path from "path";
+import * as process from "process";
+
+// src/utils.ts
+var isFullPath = (path2) => {
+  return path2.startsWith("http:") || path2.startsWith("https:") || path2.startsWith("//");
+};
+var generateUrl = (url, data) => {
+  const { name, version, path: path2 } = data;
+  if (isFullPath(path2)) {
+    url = path2;
+  }
+  return url.replace(/\{name\}/g, name).replace(/\{version\}/g, version).replace(/\{path\}/g, path2);
+};
+
+// src/transform.ts
+function getDepsVersion(name) {
+  const pwd = process.cwd();
+  const pkg = path.join(pwd, "node_modules", name, "package.json");
+  if (name && fs.existsSync(pkg)) {
+    const pkgJson = JSON.parse(fs.readFileSync(pkg, "utf8"));
+    return pkgJson.version;
+  }
+  return "";
+}
+function generateExternals(options) {
+  const { modules = [], prodUrl = "https://cdn.jsdelivr.net/npm/{name}@{version}/{path}" } = options;
+  return modules.map((m) => {
+    let v;
+    if (typeof m === "function") {
+      v = m(prodUrl);
+    } else {
+      v = m;
+    }
+    const version = getDepsVersion(v.name);
+    let pathList = [];
+    if (!Array.isArray(v.path)) {
+      pathList.push(v.path);
+    } else {
+      pathList = v.path;
+    }
+    const data = {
+      ...v,
+      version
+    };
+    pathList = pathList.map((p) => {
+      if (!version && !isFullPath(p)) {
+        throw new Error(`modules: ${data.name} package.json file does not exist`);
+      }
+      return generateUrl(prodUrl, {
+        ...data,
+        path: p
+      });
+    });
+    let css = v.css || [];
+    if (!Array.isArray(css) && css) {
+      css = [css];
+    }
+    const cssList = !Array.isArray(css) ? [] : css.map(
+      (c) => generateUrl(prodUrl, {
+        ...data,
+        path: c
+      })
+    );
+    return {
+      ...v,
+      version,
+      pathList,
+      cssList
+    };
+  });
+}
+function transformExternalCDN(options) {
+  let isBuild = false;
+  const externalMap = {};
+  const externals = generateExternals(options);
+  externals.forEach((v) => {
+    externalMap[v.name] = v.var;
+  });
+  const externalLibs = Object.keys(externalMap);
+  const plugin = [
+    {
+      name: "vite-plugin-external-cdn",
+      enforce: "post",
+      apply: "build",
+      ...externalGlobals(externalMap)
+    },
+    {
+      config(config, { command }) {
+        const userConfig = {
+          build: {
+            rollupOptions: {}
+          }
+        };
+        if (command === "build") {
+          isBuild = true;
+          userConfig.build.rollupOptions = {
+            external: [...externalLibs]
+          };
+        } else {
+          isBuild = false;
+        }
+        return userConfig;
+      },
+      transformIndexHtml(html) {
+        const cssCode = externals.map((v) => v.cssList.map((css) => `<link href="${css}" rel="stylesheet">`).join("\n")).filter((v) => v).join("\n");
+        const jsCode = !isBuild ? "" : externals.map((p) => p.pathList.map((url) => `<script src="${url}"></script>`).join("\n")).join("\n");
+        return html.replace(/<\/title>/i, `</title>${cssCode}
+${jsCode}`);
+      }
+    }
+  ];
+  return plugin;
+}
+
+// src/preset.ts
+var modulesConfig = {
+  react: {
+    var: "React",
+    jsdeliver: {
+      path: "umd/react.production.min.js"
+    }
+  },
+  "react-dom": {
+    var: "ReactDOM",
+    jsdeliver: {
+      path: "umd/react-dom.production.min.js"
+    }
+  },
+  "react-router-dom": {
+    var: "ReactRouterDOM",
+    jsdeliver: {
+      path: "umd/react-router-dom.min.js"
+    }
+  },
+  antd: {
+    var: "antd",
+    jsdeliver: {
+      path: "dist/antd.min.js",
+      css: "dist/antd.min.css"
+    }
+  },
+  ahooks: {
+    var: "ahooks",
+    jsdeliver: {
+      path: "dist/ahooks.js"
+    }
+  },
+  "@ant-design/charts": {
+    var: "charts",
+    jsdeliver: {
+      path: "dist/charts.min.js"
+    }
+  },
+  vue: {
+    var: "Vue",
+    jsdeliver: {
+      path: "dist/vue.global.prod.js"
+    }
+  },
+  vue2: {
+    var: "Vue",
+    jsdeliver: {
+      name: "vue",
+      path: "dist/vue.runtime.min.js"
+    }
+  },
+  "@vueuse/shared": {
+    var: "VueUse",
+    jsdeliver: {
+      path: "index.iife.min.js"
+    }
+  },
+  "@vueuse/core": {
+    var: "VueUse",
+    jsdeliver: {
+      path: "index.iife.min.js"
+    }
+  },
+  moment: {
+    var: "moment",
+    jsdeliver: {
+      path: "moment.min.js"
+    }
+  },
+  eventemitter3: {
+    var: "EventEmitter3",
+    jsdeliver: {
+      path: "umd/eventemitter3.min.js"
+    }
+  },
+  "file-saver": {
+    var: "window",
+    jsdeliver: {
+      path: "dist/FileSaver.min.js"
+    }
+  },
+  "browser-md5-file": {
+    var: "browserMD5File",
+    jsdeliver: {
+      path: "dist/index.umd.min.js"
+    }
+  },
+  xlsx: {
+    var: "XLSX",
+    jsdeliver: {
+      path: "dist/xlsx.full.min.js"
+    }
+  },
+  axios: {
+    var: "axios",
+    jsdeliver: {
+      path: "dist/axios.min.js"
+    }
+  },
+  lodash: {
+    var: "_",
+    jsdeliver: {
+      path: "lodash.min.js"
+    }
+  },
+  "crypto-js": {
+    var: "crypto-js",
+    jsdeliver: {
+      path: "crypto-js.min.js"
+    }
+  },
+  localforage: {
+    var: "localforage",
+    jsdeliver: {
+      path: "dist/localforage.min.js"
+    }
+  }
+};
+function isJsdeliver(prodUrl) {
+  return prodUrl.includes("//cdn.jsdelivr.net");
+}
+function isUnpkg(prodUrl) {
+  return prodUrl.includes("//unpkg.com");
+}
+function isCdnjs(prodUrl) {
+  return prodUrl.includes("//cdnjs.cloudflare.com");
+}
+function autoComplete(name) {
+  const config = modulesConfig[name];
+  if (!config) {
+    throw new Error(`The configuration of module ${name} does not exist `);
+  }
+  return (prodUrl) => {
+    if (isCdnjs(prodUrl)) {
+      throw new Error(`The configuration of module ${name} in ${prodUrl} does not exist `);
+    } else {
+      if (!(isJsdeliver(prodUrl) || isUnpkg(prodUrl))) {
+        console.warn("Unknown prodUrl, using the jsdeliver rule");
+      }
+      return {
+        name,
+        var: config.var,
+        ...config.jsdeliver
+      };
+    }
+  };
+}
+
+// src/index.ts
+var src_default = transformExternalCDN;
+export {
+  transformExternalCDN as PluginExternalCDN,
+  autoComplete,
+  src_default as default
+};

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "vite-plugin-external-cdn",
+  "version": "1.0.0",
+  "description": "A vite plugin to import dependencies as a CDN.",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "dev": "tsc -w",
+    "build": "pnpm lint:fix && rimraf dist && tsup src/index.ts --dts --format cjs,esm",
+    "prepare": "husky install",
+    "lint-staged": "lint-staged",
+    "format": "prettier -w src/**/*.* examples/**/*.*",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix src/**/*.*",
+    "type-check": "tsc --noEmit"
+  },
+  "keywords": [
+    "vite-plugin",
+    "cdn",
+    "external"
+  ],
+  "author": "zuojiangtao",
+  "license": "ISC",
+  "dependencies": {
+    "rollup-plugin-external-globals": "^0.8.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^17.6.7",
+    "@commitlint/config-conventional": "^17.6.7",
+    "@rushstack/eslint-patch": "^1.3.3",
+    "@types/node": "^20.4.9",
+    "@typescript-eslint/eslint-plugin": "^6.3.0",
+    "@typescript-eslint/parser": "^6.3.0",
+    "eslint": "^8.46.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "husky": "^8.0.3",
+    "lint-staged": "^13.2.3",
+    "prettier": "^3.0.1",
+    "rimraf": "^5.0.1",
+    "tsup": "^7.2.0",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.9"
+  },
+  "lint-staged": {
+    "src/**/*.{ts,js,json,tsx,jsx,vue}": [
+      "prettier --write",
+      "eslint --cache --fix",
+      "eslint"
+    ]
+  }
+}