{"id":14155467,"url":"https://github.com/jsdelivr/unplugin-jsdelivr","last_synced_at":"2025-12-30T02:03:10.586Z","repository":{"id":48411847,"uuid":"516869108","full_name":"jsdelivr/unplugin-jsdelivr","owner":"jsdelivr","description":"Use jsDelivr in Vite, Rollup, Webpack and esbuild!","archived":false,"fork":false,"pushed_at":"2022-08-09T14:25:26.000Z","size":342,"stargazers_count":37,"open_issues_count":1,"forks_count":3,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-11-27T03:51:52.721Z","etag":null,"topics":["esbuild","esbuild-plugin","hacktoberfest","rollup","rollup-plugin","unplugin","vite","vite-plugin","vitejs","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsdelivr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-07-22T19:45:27.000Z","updated_at":"2024-11-06T08:53:59.000Z","dependencies_parsed_at":"2022-08-31T12:23:35.894Z","dependency_job_id":null,"html_url":"https://github.com/jsdelivr/unplugin-jsdelivr","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdelivr%2Funplugin-jsdelivr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdelivr%2Funplugin-jsdelivr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdelivr%2Funplugin-jsdelivr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsdelivr%2Funplugin-jsdelivr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsdelivr","download_url":"https://codeload.github.com/jsdelivr/unplugin-jsdelivr/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228023194,"owners_count":17857593,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["esbuild","esbuild-plugin","hacktoberfest","rollup","rollup-plugin","unplugin","vite","vite-plugin","vitejs","webpack"],"created_at":"2024-08-17T08:03:25.164Z","updated_at":"2025-12-30T02:03:05.556Z","avatar_url":"https://github.com/jsdelivr.png","language":"TypeScript","funding_links":[],"categories":["webpack"],"sub_categories":[],"readme":"# unplugin-jsdelivr\n\nGenerate a bundle using the [jsDelivr CDN](https://www.jsdelivr.com/) to host the external dependencies.\n\n## Install\n\n```shell\nnpm i -D unplugin-jsdelivr\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eVite\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vite.config.ts\nimport jsDelivr from \"unplugin-jsdelivr/vite\";\n\nexport default defineConfig({\n  plugins: [\n    jsDelivr({\n      /* options */\n    }),\n  ],\n});\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eRollup\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// rollup.config.js\nimport jsDelivr from \"unplugin-jsdelivr/rollup\";\n\nexport default {\n  plugins: [\n    jsDelivr({\n      modules: [{ module: \"lodash\" }],\n      // See below for more options\n    }),\n    // other plugins\n  ],\n};\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eWebpack\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// webpack.config.js\nmodule.exports = {\n  /* ... */\n  plugins: [\n    require(\"unplugin-jsdelivr/webpack\")({\n      modules: [{ module: \"lodash\" }],\n      // See below for more options\n    }),\n  ],\n};\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eVue CLI\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vue.config.js\nmodule.exports = {\n  configureWebpack: {\n    plugins: [\n      require(\"unplugin-jsDelivr/webpack\")({\n        modules: [{ module: \"lodash\" }],\n        // See below for more options\n      }),\n    ],\n  },\n};\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eesbuild\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// esbuild.config.js\nimport { build } from \"esbuild\";\n\nbuild({\n  /* ... */\n  plugins: [\n    require(\"unplugin-jsDelivr/esbuild\")({\n      modules: [{ module: \"lodash\" }],\n      // See below for more options\n    }),\n  ],\n});\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n## Options\n\n```ts\n{\n  // Required\n  modules: [...] // See Modules\n\n  // Optional\n  cwd: process.cwd();\n  endpoint: \"npm\" // or \"gh\"\n  enforce: undefined // \"pre\" | \"post\" - only applicable to Vite and Webpack\n}\n```\n\n### Modules\n\n```ts\n// Options\n{\n  modules: [{ module: \"lodash\" }];\n\n  // Changes\n  import { map, merge as LodashMerge } from \"lodash\";\n  // to\n  import {\n    map,\n    merge as LodashMerge,\n  } from \"https://cdn.jsdelivr.net/npm/lodash@4.17.21/+esm\";\n}\n```\n\n```ts\n{\n  modules: [\n    {\n      module: \"lodash\",\n      transform: (moduleName, importName) =\u003e `${moduleName}/${importName}`,\n    },\n  ];\n\n  // Changes\n  import { map, merge as LodashMerge } from \"lodash\";\n  // to\n  import map from \"https://cdn.jsdelivr.net/npm/lodash@4.17.21/map/+esm\";\n  import LodashMerge from \"https://cdn.jsdelivr.net/npm/lodash@4.17.21/merge/+esm\";\n}\n```\n\n## How It Works\n\nThe plugin aims to resolve all the external modules into resolvable CDN URLs.\n\nIf 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`.\n\n```ts\nimport { map, merge as LodashMerge } from \"lodash\";\n```\n\n```ts\nimport {\n  map,\n  merge as LodashMerge,\n} from \"https://cdn.jsdelivr.net/npm/lodash@4.17.21/+esm\";\n```\n\nAlternatively, 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.\n\n```ts\ntransform: (moduleName, importName) =\u003e `${moduleName}/${importName}`\n\n`moduleName` -\u003e `lodash`\n`importName` -\u003e `map` and `merge`\n```\n\n```ts\nimport map from \"lodash/map\";\nimport LodashMerge from \"lodash/merge\";\n```\n\n\u003csub\u003eReference: \u003ccode\u003e[babel-plugin-transform-imports](https://www.npmjs.com/package/babel-plugin-transform-imports)\u003c/code\u003e\u003c/sub\u003e\n\nThis 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:\n\n```ts\nimport map from \"https://cdn.jsdelivr.net/npm/lodash@4.17.21/map/+esm\";\nimport LodashMerge from \"https://cdn.jsdelivr.net/npm/lodash@4.17.21/merge/+esm\";\n```\n\n\u003e TODO\n\u003e With the list of modules, we can use the jsDelivr Combine API to generate a CDN based vendor bundle of all external dependencies.\n\u003e **Currently blocked until ESM support is added to Combine API**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsdelivr%2Funplugin-jsdelivr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsdelivr%2Funplugin-jsdelivr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsdelivr%2Funplugin-jsdelivr/lists"}