vite-plugin-cdn

A plugin for vite to dependencies Cdn

Getting Started

Install (yarn or npm)

node version: >=12.0.0

vite version: >=1.0.0.rc9

yarn add vite-plugin-cdn -D or npm i vite-plugin-cdn -D

Run Example

cd ./examples

yarn install

yarn build

Usage

• Config plugin in vite.config.ts

import VitePluginCdn from 'vite-plugin-cdn';

export default {
  plugins: [
    VitePluginCdn({
      esm: true,
      modules: [
        {
          name: 'vue',
          url: 'https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.esm-browser.prod.js',
        },
      ],
    }),
  ],
};

Options Description

enabled

type: boolean

default: process.env.NODE_ENV === 'production'

description: Whether to enable

esm

type: boolean

default: true

description: Whether it is esm mode.If false, it will directly embed the url in index.html as a script

cssInject

type: head|body,

default: body .

description: If there is a css address, specify the location where css is inserted

modules

type: ModuleItem[],

default: []

description: Modules that need to use cdn

ModuleItem

  // lib name
  name: string;
  // lib cdn css
  css?: string;
  // lib cdn url
  url: string;

e g

vite.config.ts

import VitePluginCdn from 'vite-plugin-cdn';

export default {
  plugins: [
    VitePluginCdn({
      esm: true,
      modules: [
        {
          name: 'vue',
          url: 'https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.esm-browser.prod.js',
        },
      ],
    }),
  ],
};

outPut

import {
  defineComponent as e,
  openBlock as r,
  createBlock as n,
  createApp as o,
} from 'https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.esm-browser.prod.js';
var t = e({ name: 'App', setup: () => ({}) });
(t.render = function (e, o, t, p, u, d) {
  return r(), n('div', null, ' HelloWorld ');
}),
  o(t).mount('#app');

License

MIT