nonzzz / vite-plugin-cdn

replace module with CDN. work with vite.
MIT License
73 stars 5 forks source link

能否提供一下自定义CDN设置的示例? #40

Closed M69W closed 6 months ago

M69W commented 6 months ago

以下设置 期待实现 CDN 对应的 url:

https://cdn-abc.com/vue.global@3.3.4.js
"devDependencies": {
    "vite-plugin-cdn2": "^1.1.0",
}

cdn.js

import { cdn } from "vite-plugin-cdn2";
// import { cdnjs } from "vite-plugin-cdn2/resolver/cdnjs";
import { defineResolve } from "vite-plugin-cdn2/resolve";

// 方法一: 怎么引入需要 cdn 处理的依赖?
export const myResolve = defineResolve({
  name: "resolve:custom",
  setup({ extra }) {
    const baseURL = "https://cdn-abc.com/";
    const { version, name, relativeModule } = extra;
    const url = new URL(`${name}/${version}/${relativeModule}`, baseURL);
    console.log(url);
    return {
      url: url.href,
      injectTo: "head-prepend",
      attrs: {}
    };
  }
});

方法二: 
export function enableCDN(isEnabled) {
  console.log("enableCDN", isEnabled);
  if (isEnabled === "true") {
    return cdn({
      // url 可以更换为私有或其他源
      // url: "https://cdn.jsdelivr.net/npm/",
      // url: "https://unpkg.com/",
      url: "https://cdn-abc.com",
      // modules: ["vue", "vue-demi", "pinia", "axios", "vant", "vue-router"]
      modules: [
        {
          name: "vue",
          relativeModule: "./vue.global.js"
        }
      ]
    });
  }
}

debug模式

pnpm build
> set DEBUG=vite-plugin-cdn2 & vite build

enableCDN true                                                                                15:35:03
  vite-plugin-cdn2 start scanning +0ms
  vite-plugin-cdn2 scanning done Map(0) {} +969ms

 ERROR  vite-plugin-cdn2: vue Maximum call stack size exceeded                                15:35:04

vite v4.5.0 building for production...                                                        15:35:04
✓ 391 modules transformed.                                                                    15:35:08
rendering chunks (3)...  vite-plugin-cdn2 start transformIndexHtml +14s
  vite-plugin-cdn2 transformIndexHtml Done [] +2ms
rendering chunks (3)...  vite-plugin-cdn2 start transformIndexHtml +4s
  vite-plugin-cdn2 transformIndexHtml Done [] +0ms
✓ built in 17.54s                                                                             15:35:21

demo https://github.com/yulimchen/vue3-h5-template

nonzzz commented 6 months ago

你module填入的模块就会被处理relativeModule指的是真实的模块地址而不是cdn后面需要拼接上的对于vue 如果要处理成min的话 你如果熟悉他 你可以改写relativeModule否则就在自己的resolver里面去处理。

nonzzz commented 6 months ago

1.0版本之前的配置方式都已经废弃了。1.0作为一个stable版本不会再使用之前的配置 一律采用resolver的方式我觉得是最优解,比如你需要处理vue 那么就是


cdn({
        modules: ['vue'],
        resolve: yourRresolve()
      }),
M69W commented 6 months ago

期待结果

https://cdn-abc.com/vue.global@3.3.4.js

设置

export function enableCDN(isEnabled) {
  if (isEnabled === "true" || isEnabled === true) {
    return cdn({
      modules: [
        {
          name: "vue",
          relativeModule: "/vue.global@3.3.4.js"
        }
      ],
      resolve: {
        name: "resolve:custom",
        setup({ extra }) {
          const baseURL = "https://cdn-abc.com/";
          const { version, name, relativeModule } = extra;
          console.log(
            "version, name, relativeModule",
            version,
            name,
            relativeModule
          );
          const url = new URL(
            // `${name}/${version}/${relativeModule}`,
            `${relativeModule}`,
            baseURL
          );
          console.log("url", url);
          return {
            url: url.href,
            injectTo: "head-prepend",
            attrs: {}
          };
        }
      }
    });
  }
}

以上设置并不能注入html

debug

> set DEBUG=vite-plugin-cdn2 & vite build

  vite-plugin-cdn2 start scanning +0ms
  vite-plugin-cdn2 scanning done Map(0) {} +2s

 ERROR  vite-plugin-cdn2: vue Maximum call stack size exceeded                                      09:41:44

vite v4.5.0 building for production...                                                              09:41:44
✓ 391 modules transformed.                                                                          09:41:49
rendering chunks (3)...  vite-plugin-cdn2 start transformIndexHtml +14s
  vite-plugin-cdn2 transformIndexHtml Done [] +1ms
rendering chunks (3)...  vite-plugin-cdn2 start transformIndexHtml +4s
  vite-plugin-cdn2 transformIndexHtml Done [] +1ms
nonzzz commented 6 months ago

你并没有理解我的意思 https://github.com/nonzzz/vite-plugin-cdn/blob/89c965496e965173b0ffb184c60b750695b8812f/src/scanner.ts#L115C1-L125 这个relativeModule是拿去解析umd或者iife模块的他不应该是一个不存在的地址

M69W commented 6 months ago

你并没有理解我的意思 https://github.com/nonzzz/vite-plugin-cdn/blob/89c965496e965173b0ffb184c60b750695b8812f/src/scanner.ts#L115C1-L125 这个relativeModule是拿去解析umd或者iife模块的他不应该是一个不存在的地址

感谢,已实现

export function enableCDN(isEnabled) {
  if (isEnabled === "true") {
    return cdn({
      modules: [
        {
          name: "vue"
        }
      ],
      resolve: {
        name: "resolve:custom",
        setup({ extra }) {
          const baseURL = "https://cdn-abc.com/";
          const { version, name, relativeModule } = extra;
          console.log(
            "version, name, relativeModule",
            version,
            name,
            relativeModule
          );
          let url = "";
          if (name === "vue") {
            const Vuename = "vue.global@3.3.4.js";
            url = new URL(
              // `${name}/${version}/${relativeModule}`,
              `${Vuename}`,
              // `${relativeModule}`,
              baseURL
            );
          }
          console.log("url", url);
          return {
            url: url.href,
            injectTo: "head-prepend",
            attrs: {}
          };
        }
      }
    });
  }
}
M69W commented 6 months ago
export function enableCDN(isEnabled) {
  if (isEnabled === "true") {
    return cdn({
      modules: [
        {
          name: "vue",
          aliasName: "vue.global.js"
        },
        {
          name: "vue-router",
          aliasName: "vue-router.global.js"
        },
        {
          name: "pinia",
          aliasName: "pinia.iife.js"
        },
        {
          name: "vant",
          aliasName: "vant.min.js"
        }
      ],
      resolve: {
        name: "resolve:custom",
        setup({ extra }) {
          const baseURL ="https://cdn-abc.com/";
          const { aliasName } = extra;
          const url = new URL(
            `${aliasName}`,
            baseURL
          );
          console.log("url", url);
          return {
            url: url.href,
            injectTo: "head-prepend",
            attrs: {}
          };
        }
      }
    });
  }
}