Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jsdelivr/unplugin-jsdelivr
Use jsDelivr in Vite, Rollup, Webpack and esbuild!
https://github.com/jsdelivr/unplugin-jsdelivr
esbuild esbuild-plugin hacktoberfest rollup rollup-plugin unplugin vite vite-plugin vitejs webpack
Last synced: 17 days ago
JSON representation
Use jsDelivr in Vite, Rollup, Webpack and esbuild!
- Host: GitHub
- URL: https://github.com/jsdelivr/unplugin-jsdelivr
- Owner: jsdelivr
- License: mit
- Created: 2022-07-22T19:45:27.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-08-09T14:25:26.000Z (over 2 years ago)
- Last Synced: 2024-11-27T03:51:52.721Z (29 days ago)
- Topics: esbuild, esbuild-plugin, hacktoberfest, rollup, rollup-plugin, unplugin, vite, vite-plugin, vitejs, webpack
- Language: TypeScript
- Homepage:
- Size: 334 KB
- Stars: 37
- Watchers: 5
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# unplugin-jsdelivr
Generate a bundle using the [jsDelivr CDN](https://www.jsdelivr.com/) to host the external dependencies.
## Install
```shell
npm i -D unplugin-jsdelivr
```
Vite
```ts
// vite.config.ts
import jsDelivr from "unplugin-jsdelivr/vite";
export default defineConfig({
plugins: [
jsDelivr({
/* options */
}),
],
});
```
Rollup
```ts
// rollup.config.js
import jsDelivr from "unplugin-jsdelivr/rollup";
export default {
plugins: [
jsDelivr({
modules: [{ module: "lodash" }],
// See below for more options
}),
// other plugins
],
};
```
Webpack
```ts
// webpack.config.js
module.exports = {
/* ... */
plugins: [
require("unplugin-jsdelivr/webpack")({
modules: [{ module: "lodash" }],
// See below for more options
}),
],
};
```
Vue CLI
```ts
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require("unplugin-jsDelivr/webpack")({
modules: [{ module: "lodash" }],
// See below for more options
}),
],
},
};
```
esbuild
```ts
// esbuild.config.js
import { build } from "esbuild";
build({
/* ... */
plugins: [
require("unplugin-jsDelivr/esbuild")({
modules: [{ module: "lodash" }],
// See below for more options
}),
],
});
```
## Options
```ts
{
// Required
modules: [...] // See Modules
// Optional
cwd: process.cwd();
endpoint: "npm" // or "gh"
enforce: undefined // "pre" | "post" - only applicable to Vite and Webpack
}
```
### Modules
```ts
// Options
{
modules: [{ module: "lodash" }];
// Changes
import { map, merge as LodashMerge } from "lodash";
// to
import {
map,
merge as LodashMerge,
} from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
}
```
```ts
{
modules: [
{
module: "lodash",
transform: (moduleName, importName) => `${moduleName}/${importName}`,
},
];
// Changes
import { map, merge as LodashMerge } from "lodash";
// to
import map from "https://cdn.jsdelivr.net/npm/[email protected]/map/+esm";
import LodashMerge from "https://cdn.jsdelivr.net/npm/[email protected]/merge/+esm";
}
```
## How It Works
The plugin aims to resolve all the external modules into resolvable CDN URLs.
If only `lodash` is included with no transform function passed through, it only resolves the package to the ESM bundle online. The version is resolved from your `package.json`.
```ts
import { map, merge as LodashMerge } from "lodash";
```
```ts
import {
map,
merge as LodashMerge,
} from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
```
Alternatively, if a transform function is passed through to the config, it will first transform the member style imports into default imports before resolving to the ESM bundles online.
```ts
transform: (moduleName, importName) => `${moduleName}/${importName}`
`moduleName` -> `lodash`
`importName` -> `map` and `merge`
```
```ts
import map from "lodash/map";
import LodashMerge from "lodash/merge";
```
Reference: [babel-plugin-transform-imports](https://www.npmjs.com/package/babel-plugin-transform-imports)
This creates more efficient development bundles as we're not loading the whole library. It also helps identify the exact files needed to be loaded from the CDN, producing the following code:
```ts
import map from "https://cdn.jsdelivr.net/npm/[email protected]/map/+esm";
import LodashMerge from "https://cdn.jsdelivr.net/npm/[email protected]/merge/+esm";
```
> TODO
> With the list of modules, we can use the jsDelivr Combine API to generate a CDN based vendor bundle of all external dependencies.
> **Currently blocked until ESM support is added to Combine API**