https://github.com/ikasoba/vite-plugin-cdn

cdn plugin for vite
https://github.com/ikasoba/vite-plugin-cdn

Last synced: 2 months ago
JSON representation

cdn plugin for vite

• Host: GitHub
• URL: https://github.com/ikasoba/vite-plugin-cdn
• Owner: ikasoba
• License: mit
• Created: 2024-01-28T12:39:55.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-02-02T08:05:34.000Z (11 months ago)
• Last Synced: 2024-10-12T06:33:27.386Z (3 months ago)
• Language: TypeScript
• Size: 41 KB
• Stars: 3
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        


vite-plugin-cdn📦


Plugin to use javascript package cdn in vite.


```ts

import { defineConfig } from "vite";

import cdn from "@ikasoba000/vite-plugin-cdn";

export default defineConfig({

  plugins: [

    cdn()

  ],

});

```

# about

vite-plugin-cdn refers to esm.sh by default, but it can also refer to cdn such as skypack.

```ts

export default defineConfig({

  plugins: [

    cdn({

      // :name, :version, and :path are variable items.

      format: "https://cdn.skypack.dev/:name@:version/:path"

    })

  ],

});

```

The pattern can also specify a function.

```ts

export default defineConfig({

  plugins: [

    cdn({

      format(name: string, version: string, path?: string) {

        return name == "react"

          ? `https://esm.sh/preact@${version}/${path ?? ""}`

          : `https://cdn.skypack.dev/${name}@${version}/${path ?? ""}`;

      }

    })

  ],

});

```

You can explicitly select or exclude packages to be loaded from cdn.

```ts

export default defineConfig({

  plugins: [

    cdn({

      // By default, all packages are loaded from cdn.

      includes: [ , ... ]

    })

  ],

});

// or

export default defineConfig({

  plugins: [

    cdn({

      // Packages specified here are not loaded from cdn,

      // but are bundled by vite in many cases.

      excludes: [ , ... ]

    })

  ],

});

```