@vearvip/vite-plugin-cdn-import 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 - MMF-FE
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,159 @@
+# Import modules from CDN with vite plugin
+
+English | [简体中文](README.zh-CN.md)
+
+[![GitHub tag](https://img.shields.io/github/tag/MMF-FE/vite-plugin-cdn-import.svg)](https://github.com/MMF-FE/vite-plugin-cdn-import/releases)
+[![License](https://img.shields.io/github/license/SafdarJamal/vite-template-react)](https://github.com/MMF-FE/vite-plugin-cdn-import/blob/master/LICENSE)
+
+Allows you to specify modules to be introduced in a production environment using a CDN.
+
+This can reduce build time and improve page load speed in production environments.
+
+## Installation
+
+Install the plugin with npm:
+
+```
+npm install vite-plugin-cdn-import --save-dev
+```
+
+or yarn
+
+```
+yarn add vite-plugin-cdn-import -D
+```
+
+## Basic Usage
+
+Add it to vite.config.js
+
+```js
+// vite.config.js
+import cdn from 'vite-plugin-cdn-import'
+
+export default {
+    plugins: [
+        cdn({
+            modules: [
+                {
+                    name: 'react',
+                    var: 'React',
+                    path: `umd/react.production.min.js`,
+                },
+                {
+                    name: 'react-dom',
+                    var: 'ReactDOM',
+                    path: `umd/react-dom.production.min.js`,
+                },
+            ],
+        }),
+    ],
+}
+```
+
+### Use preset
+
+```js
+// vite.config.js
+import cdn from 'vite-plugin-cdn-import'
+
+export default {
+    plugins: [
+        cdn({
+            modules: ['react', 'react-dom'],
+        }),
+    ],
+}
+```
+
+### Preset packages
+
+- react
+- react-dom
+- react-router-dom
+- antd
+- vue
+- vue2
+- vue-router
+- vue-router@3
+- moment
+- dayjs
+- axios
+- lodash
+
+## Options
+
+
+### prodUrl
+Global prodUrl attribute, template url that generates CND file path.
+- REF: [prodUrl](https://github.com/shirotech/webpack-cdn-plugin?tab=readme-ov-file#produrlstring--unpkgcomnameversionpath)
+- Type
+```ts
+{
+    prodUrl?: string
+}
+```
+- Default: <https://cdn.jsdelivr.net/npm/{name}@{version}/{path}>
+
+### modules
+external config
+- Type
+```ts
+type GetModuleFunc = (prodUrl: string) => Module
+{
+    modules: (Module | Module[] | GetModuleFunc | GetModuleFunc[])[]
+}
+```
+
+### enableInDevMode
+Enabled in dev mode
+- Type: `boolean`
+- Default：`false`
+
+> Please ensure process.env.NODE_ENV === 'development' when you use vite2, vite3.
+
+### generateScriptTag
+Custom generated script tags
+- Type
+```ts
+generateScriptTag?: (
+    name: string,
+    scriptUrl: string,
+) => Omit<HtmlTagDescriptor, 'tag' | 'children'>
+```
+
+### generateCssLinkTag
+Customize generated css link tags
+
+- Type
+```ts
+generateCssLinkTag?: (
+    name: string,
+    cssUrl: string,
+) => Omit<HtmlTagDescriptor, 'tag' | 'children'>
+```
+
+### Module
+
+| Name | Description                                   | Type              |
+| ---- | --------------------------------------------- | ----------------- |
+| name | package name                        | string            |
+| alias | Alias ​​of name, for example "react-dom/client" is an alias of "react-dom"   | string[]      |
+| var  | Variables assigned globally to the module| string            |
+| path | Specify the load path on the CDN                         | string / string[] |
+| css  | Multiple style sheets can be loaded from CDN addresses         | string / string[] |
+| prodUrl  | Override global prodUrl   | string / string[] |
+
+
+## Other CDN pordUrl
+
+| Name  | pordUrl                                                  |
+| ----- | -------------------------------------------------------- |
+| unpkg | //unpkg.com/{name}@{version}/{path}                      |
+| cdnjs | //cdnjs.cloudflare.com/ajax/libs/{name}/{version}/{path} |
+
+## Ressources
+
+- [webpack-cdn-plugin](https://github.com/shirotech/webpack-cdn-plugin)
+- [rollup-plugin-external-globals](https://github.com/eight04/rollup-plugin-external-globals)
+- [vite-plugin-externals](https://github.com/crcong/vite-plugin-externals)

package/README.zh-CN.md

@@ -0,0 +1,155 @@
+# 从 CDN 加载 modules 的 vite 插件
+
+[English](README.md) | 简体中文
+
+[![GitHub tag](https://img.shields.io/github/tag/MMF-FE/vite-plugin-cdn-import.svg)](https://github.com/MMF-FE/vite-plugin-cdn-import/releases)
+[![License](https://img.shields.io/github/license/SafdarJamal/vite-template-react)](https://github.com/MMF-FE/vite-plugin-cdn-import/blob/master/LICENSE)
+
+允许指定 modules 在生产环境中使用 CDN 引入。
+
+这可以减少构建时间,并且提高生产环境中页面加载速度。
+
+## 安装
+
+下载 npm 插件
+
+```bash
+npm install vite-plugin-cdn-import --save-dev
+```
+
+or yarn
+
+```bash
+yarn add vite-plugin-cdn-import -D
+```
+
+## 基本用法
+
+```js
+// vite.config.js
+import cdn from 'vite-plugin-cdn-import'
+
+export default {
+    plugins: [
+        cdn({
+            modules: [
+                {
+                    name: 'react',
+                    var: 'React',
+                    path: `umd/react.production.min.js`,
+                },
+                {
+                    name: 'react-dom',
+                    var: 'ReactDOM',
+                    path: `umd/react-dom.production.min.js`,
+                },
+            ],
+        }),
+    ],
+}
+```
+
+### 使用预设
+
+```js
+// vite.config.js
+import cdn from 'vite-plugin-cdn-import'
+
+export default {
+    plugins: [
+        cdn({
+            modules: ['react', 'react-dom'],
+        }),
+    ],
+}
+```
+
+### 预设的 npm 包
+
+- react
+- react-dom
+- react-router-dom
+- antd
+- vue
+- vue2
+- vue-router
+- vue-router@3
+- moment
+- dayjs
+- axios
+- lodash
+
+
+## 参数
+
+### prodUrl
+全局 prodUrl 属性，生成 CND 文件路径的模板 url. 
+- REF: [prodUrl](https://github.com/shirotech/webpack-cdn-plugin?tab=readme-ov-file#produrlstring--unpkgcomnameversionpath)
+- 类型
+```ts
+{
+    prodUrl?: string
+}
+```
+- 默认值: <https://cdn.jsdelivr.net/npm/{name}@{version}/{path}>
+
+### modules
+external 模块配置
+- 类型
+```ts
+type GetModuleFunc = (prodUrl: string) => Module
+{
+    modules: (Module | Module[] | GetModuleFunc | GetModuleFunc[])[]
+}
+```
+
+### enableInDevMode
+是否在开发模式中启用
+- 类型: `boolean`
+- 默认值：`false`
+
+> vite2, vite3 请确保开发模式 process.env.NODE_ENV === 'development'
+
+### generateScriptTag
+自定义生成的 script 标签
+- 类型
+```ts
+generateScriptTag?: (
+    name: string,
+    scriptUrl: string,
+) => Omit<HtmlTagDescriptor, 'tag' | 'children'>
+```
+
+### generateCssLinkTag
+自定义生成 css link 标签
+- 类型
+```ts
+generateCssLinkTag?: (
+    name: string,
+    cssUrl: string,
+) => Omit<HtmlTagDescriptor, 'tag' | 'children'>
+```
+
+### Module 配置
+
+| Name | Description                                   | Type              |
+| ---- | --------------------------------------------- | ----------------- |
+| name | 需要 CDN 加速的包名称                         | string            |
+| alias | 名称的别名，例如“react-dom/client”是“react-dom”的别名   | string[]      |
+| var  | 全局分配给模块的变量 | string            |
+| path | 指定 CDN 上的加载路径                         | string / string[] |
+| css  | 可以指定从 CDN 地址上加载多个样式表           | string / string[] |
+| prodUrl  | 覆盖全局的 prodUrl   | string / string[] |
+
+## 其他的 CDN pordUrl 地址
+
+| Name  | pordUrl                                                  |
+| ----- | -------------------------------------------------------- |
+| unpkg | //unpkg.com/{name}@{version}/{path}                      |
+| cdnjs | //cdnjs.cloudflare.com/ajax/libs/{name}/{version}/{path} |
+
+## 资源
+
+- [webpack-cdn-plugin](https://github.com/shirotech/webpack-cdn-plugin)
+- [rollup-plugin-external-globals](https://github.com/eight04/rollup-plugin-external-globals)
+- [vite-plugin-externals](https://github.com/crcong/vite-plugin-externals)

package/dist/index.cjs

@@ -0,0 +1,379 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+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, {
+  Plugin: () => PluginImportToCDN,
+  autoComplete: () => autoComplete2,
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+var import_rollup_plugin_external_globals = __toESM(require("rollup-plugin-external-globals"), 1);
+var import_vite_plugin_externals = require("vite-plugin-externals");
+var import_fs = __toESM(require("fs"), 1);
+var import_path = __toESM(require("path"), 1);
+
+// src/autoComplete.ts
+var isDev = process.env.NODE_ENV === "development";
+var modulesConfig = {
+  react: {
+    var: "React",
+    jsdeliver: {
+      path: isDev ? "umd/react.development.js" : "umd/react.production.min.js"
+    },
+    bootCdn: {
+      path: isDev ? "umd/react.development.js" : "umd/react.production.min.js"
+    }
+  },
+  "react-dom": {
+    var: "ReactDOM",
+    alias: ["react-dom/client"],
+    jsdeliver: {
+      path: isDev ? "umd/react-dom.development.js" : "umd/react-dom.production.min.js"
+    },
+    bootCdn: {
+      path: isDev ? "umd/react-dom.development.js" : "umd/react-dom.production.min.js"
+    }
+  },
+  "react-router-dom": {
+    var: "ReactRouterDOM",
+    jsdeliver: {
+      path: "dist/umd/react-router-dom.production.min.js"
+    },
+    bootCdn: {
+      path: "umd/react-router-dom.production.min.js"
+    }
+  },
+  antd: {
+    var: "antd",
+    jsdeliver: {
+      path: "dist/antd.min.js",
+      css: "dist/reset.min.css"
+    },
+    bootCdn: {
+      path: "antd.min.js",
+      css: "reset.min.css"
+    }
+  },
+  vue: {
+    var: "Vue",
+    jsdeliver: {
+      path: isDev ? "dist/vue.runtime.global.js" : "dist/vue.runtime.global.prod.js"
+    },
+    bootCdn: {
+      path: isDev ? "vue.runtime.global.js" : "vue.runtime.global.prod.js"
+    }
+  },
+  "vue-router": {
+    var: "VueRouter",
+    jsdeliver: {
+      path: "dist/vue-router.global.min.js"
+    },
+    bootCdn: {
+      path: "vue-router.global.min.js"
+    }
+  },
+  "vue-router@3": {
+    var: "VueRouter",
+    jsdeliver: {
+      name: "vue-router",
+      path: "dist/vue-router.min.js"
+    },
+    bootCdn: {
+      name: "vue-router",
+      path: "vue-router.min.js"
+    }
+  },
+  vue2: {
+    var: "Vue",
+    jsdeliver: {
+      name: "vue",
+      path: isDev ? "dist/vue.runtime.js" : "dist/vue.runtime.min.js"
+    },
+    bootCdn: {
+      name: "vue",
+      path: isDev ? "vue.runtime.js" : "vue.runtime.min.js"
+    }
+  },
+  moment: {
+    var: "moment",
+    jsdeliver: {
+      path: "moment.min.js"
+    },
+    bootCdn: {
+      path: "moment.min.js"
+    }
+  },
+  dayjs: {
+    var: "dayjs",
+    jsdeliver: {
+      path: "dayjs.min.js"
+    },
+    bootCdn: {
+      path: "dayjs.min.js"
+    }
+  },
+  axios: {
+    var: "axios",
+    jsdeliver: {
+      path: "dist/axios.min.js"
+    },
+    bootCdn: {
+      path: "axios.min.js"
+    }
+  },
+  lodash: {
+    var: "_",
+    jsdeliver: {
+      path: "lodash.min.js"
+    },
+    bootCdn: {
+      path: "lodash.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 isBootCdn(prodUrl) {
+  return prodUrl.includes("//cdn.bootcdn.net");
+}
+function genModuleByName(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)) || isBootCdn(prodUrl)) {
+        console.warn(
+          "Unknown CDN, please ensure that this CDN supports jsdelivr rules"
+        );
+      }
+      return __spreadValues({
+        name,
+        var: config.var,
+        alias: config.alias
+      }, isBootCdn(prodUrl) ? config.bootCdn : config.jsdeliver);
+    }
+  };
+}
+function autoComplete(name) {
+  if (Array.isArray(name)) {
+    return name.map(genModuleByName);
+  } else {
+    return genModuleByName(name);
+  }
+}
+var autoComplete_default = autoComplete;
+
+// src/index.ts
+var isDev2 = process.env.NODE_ENV === "development";
+function getModuleVersion(name) {
+  const pwd = process.cwd();
+  const pkgFile = import_path.default.join(pwd, "node_modules", name, "package.json");
+  if (import_fs.default.existsSync(pkgFile)) {
+    const pkgJson = JSON.parse(import_fs.default.readFileSync(pkgFile, "utf8"));
+    return pkgJson.version;
+  }
+  return "";
+}
+function isFullPath(path2) {
+  return path2.startsWith("http:") || path2.startsWith("https:") || path2.startsWith("//") ? true : false;
+}
+function renderUrl(url, data) {
+  const { path: path2 } = data;
+  if (isFullPath(path2)) {
+    url = path2;
+  }
+  return url.replace(/\{name\}/g, data.name).replace(/\{version\}/g, data.version).replace(/\{path\}/g, path2);
+}
+function getModuleInfo(module2, prodUrl) {
+  prodUrl = module2.prodUrl || prodUrl;
+  let v = module2;
+  const version = getModuleVersion(v.name);
+  let pathList = [];
+  if (!Array.isArray(v.path)) {
+    pathList.push(v.path);
+  } else {
+    pathList = v.path;
+  }
+  const data = __spreadProps(__spreadValues({}, v), {
+    version
+  });
+  pathList = pathList.map((p) => {
+    if (!version && !isFullPath(p)) {
+      throw new Error(
+        `modules: ${data.name} package.json file does not exist`
+      );
+    }
+    return renderUrl(prodUrl, __spreadProps(__spreadValues({}, data), {
+      path: p
+    }));
+  });
+  let css = v.css || [];
+  if (!Array.isArray(css) && css) {
+    css = [css];
+  }
+  const cssList = !Array.isArray(css) ? [] : css.map(
+    (c) => renderUrl(prodUrl, __spreadProps(__spreadValues({}, data), {
+      path: c
+    }))
+  );
+  return __spreadProps(__spreadValues({}, v), {
+    version,
+    pathList,
+    cssList
+  });
+}
+function PluginImportToCDN(options) {
+  const {
+    modules = [],
+    prodUrl = "https://cdn.jsdelivr.net/npm/{name}@{version}/{path}",
+    enableInDevMode = false,
+    generateCssLinkTag,
+    generateScriptTag
+  } = options;
+  let isBuild = false;
+  const data = modules.map((_m) => {
+    const m = typeof _m === "string" ? autoComplete_default(_m) : _m;
+    const list = (Array.isArray(m) ? m : [m]).map(
+      (v) => typeof v === "function" ? v(prodUrl) : v
+    );
+    return list.map((v) => getModuleInfo(v, prodUrl));
+  }).flat();
+  const externalMap = {};
+  data.forEach((v) => {
+    externalMap[v.name] = v.var;
+    if (Array.isArray(v.alias)) {
+      v.alias.forEach((alias) => {
+        externalMap[alias] = v.var;
+      });
+    }
+  });
+  const plugins = [
+    {
+      name: "vite-plugin-cdn-import",
+      enforce: "pre",
+      config(_, { command }) {
+        isBuild = command === "build";
+        let userConfig = {
+          build: {
+            rollupOptions: {
+              plugins: []
+            }
+          }
+        };
+        if (isBuild) {
+          userConfig.build.rollupOptions.plugins = [
+            (0, import_rollup_plugin_external_globals.default)(externalMap)
+          ];
+        }
+        return userConfig;
+      },
+      transformIndexHtml(html) {
+        if (!isBuild && !enableInDevMode) {
+          return html;
+        }
+        const descriptors = [];
+        data.forEach((v) => {
+          v.pathList.forEach((url) => {
+            const cusomize = (generateScriptTag == null ? void 0 : generateScriptTag(v.name, url)) || {};
+            const attrs = __spreadValues({
+              src: url,
+              crossorigin: "anonymous"
+            }, cusomize.attrs);
+            descriptors.push(__spreadProps(__spreadValues({
+              tag: "script"
+            }, cusomize), {
+              attrs
+            }));
+          });
+          v.cssList.forEach((url) => {
+            const cusomize = (generateCssLinkTag == null ? void 0 : generateCssLinkTag(v.name, url)) || {};
+            const attrs = __spreadValues({
+              href: url,
+              rel: "stylesheet",
+              crossorigin: "anonymous"
+            }, cusomize.attrs);
+            descriptors.push(__spreadProps(__spreadValues({
+              tag: "link"
+            }, cusomize), {
+              attrs
+            }));
+          });
+        });
+        return descriptors;
+      }
+    }
+  ];
+  if (isDev2 && enableInDevMode) {
+    plugins.push(
+      (0, import_vite_plugin_externals.viteExternalsPlugin)(externalMap, {
+        enforce: "pre"
+      })
+    );
+  }
+  return plugins;
+}
+var autoComplete2 = autoComplete_default;
+var src_default = PluginImportToCDN;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Plugin,
+  autoComplete
+});