nonzzz / vite-plugin-cdn

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

vite-plugin-cdn2: vue Maximum call stack size exceeded #47

Open Bisstocuz opened 2 months ago

Bisstocuz commented 2 months ago
cdn({
    modules: [{ name: "vue", relativeModule: "vue.global.prod.min.js" }, "vue-router", "vue-demi", "pinia", "axios" ],
    resolve: defineResolve({
        name: "resolve:custom",
        setup({ extra }) {
            const baseURL = "https://cdn.staticfile.net/";
            const { version, name, relativeModule } = extra;
            const url = new URL(`${name}/${version}/${relativeModule}`, baseURL);
            return {
                url: url.href,
                injectTo: "head-prepend",
                attrs: {
                    crossOrigin: 'anonymous'
                },
            };
        },
    })
})

And there is no vue in output:

<script crossOrigin="anonymous" src="https://cdn.staticfile.net/vue-router/4.2.0/dist/vue-router.global.js"></script>
<script crossOrigin="anonymous" src="https://cdn.staticfile.net/vue-demi/0.14.6/lib/index.iife.js"></script>
<script crossOrigin="anonymous" src="https://cdn.staticfile.net/pinia/2.1.7/dist/pinia.iife.js"></script>
<script crossOrigin="anonymous" src="https://cdn.staticfile.net/axios/1.5.0/dist/axios.min.js"></script>
nonzzz commented 2 months ago

relativeModule means the package root path.Usually contain package.json. AFAIK vue bundle asserts contain dist directory. I might think u can try "./dist/xxx"? Another way to change it you can do your logic in plugin system.

Bisstocuz commented 2 months ago

relativeModule means the package root path.Usually contain package.json. AFAIK vue bundle asserts contain dist directory. I might think u can try "./dist/xxx"? Another way to change it you can do your logic in plugin system.

My code was modeled after this docs

The path of assets doesn't always include dist, for example, check this: https://cdnjs.com/libraries/vue

Could you please provide a simple example about how to change this behavior?

nonzzz commented 2 months ago

relativeModule is use for code block. Notice you relativeModule is vue.global.prod.min.js isn't be pass.

You can get package name in setup. so you just using the follow logic.


if (name === 'vue') {

// do your logic.

return 

}

... etc
nonzzz commented 2 months ago

I've been busy recently. Some of logic and document isn't friendly. I create a new branch to redesign some of logic.