A vite plugin that loads the specified deps over CDN during dev, and downloads/includes them into bundle during build.

exampe-config.js

// example vite.config.js
import { cdn } from './vite-plugin-cdn'

export default {
  plugins: [
    // also supported: esm.run, jspm
    // loads the dep over the CDN during dev
    // auto downloads and includes into the bundle during build
    cdn('skypack', {
      vue: '^3.0.5'
    })
  ]
}

vite-plugin-cdn.js

const fetch = require('node-fetch')
const { init, parse } = require('es-module-lexer')
const MagicString = require('magic-string').default

const mapping = {
  skypack: ['https://cdn.skypack.dev/'],
  'esm.run': ['https://cdn.jsdelivr.net/', 'npm/', '/+esm'],
  jspm: ['https://jspm.dev/']
}

export function cdn(provider, include = {}) {
  if (!(provider in mapping)) {
    throw new Error(
      `Unsupported provider: ${provider}. Supported providers: ${Object.keys(
        mapping
      ).join(', ')}`
    )
  }

  const [base, prefix = '', postfix = ''] = mapping[provider]
  let isBuild = false
  let needSourcemap = true

  return {
    name: 'cdn-bundle',
    enforce: 'pre',

    config() {
      return {
        alias: Object.keys(include).map((id) => ({
          find: id,
          replacement: `${base}${prefix}${id}@${include[id]}${postfix}`
        }))
      }
    },

    configResolved(config) {
      isBuild = config.command === 'build'
      needSourcemap = isBuild ? config.build.sourcemap : true
    },

    resolveId(id) {
      if (id.startsWith(base)) {
        return id
      }
    },

    async load(id) {
      if (isBuild && id.startsWith(base)) {
        const src = await (await fetch(id)).text()
        await init
        let imports
        try {
          imports = parse(src)[0]
        } catch (e) {
          const err = new Error(`failed to parse external request ${id}.`)
          this.error(err, e.idx)
        }
        if (!imports.length) {
          return src
        }

        let s
        const ss = () => s || (s = new MagicString(src))
        for (let index = 0; index < imports.length; index++) {
          const { s: start, e: end, d: dynamicIndex } = imports[index]
          let url = src.slice(start, end)

          let isLiteralDynamic = false
          if (dynamicIndex >= 0) {
            url = url.replace(/\/\*[\s\S]*?\*\/|([^\\:]|^)\/\/.*$/gm, '').trim()
            const literalIdMatch = url.match(/^'([^']+)'|"([^"]+)"$/)
            if (literalIdMatch) {
              isLiteralDynamic = true
              url = literalIdMatch[1] || literalIdMatch[2]
            }
          }

          if (url.startsWith('/')) {
            url = base + url.slice(1)
            ss().overwrite(start, end, isLiteralDynamic ? `"${url}"` : url)
          }
        }

        if (s) {
          return {
            code: s.toString(),
            map: needSourcemap ? s.generateMap({ hiref: true }) : null
          }
        } else {
          return src
        }
      }
    }
  }
}