{"id":28043061,"url":"https://github.com/lihanspace/vite-plugin-inject-externals","last_synced_at":"2025-08-09T04:19:42.647Z","repository":{"id":57393115,"uuid":"416147143","full_name":"lihanspace/vite-plugin-inject-externals","owner":"lihanspace","description":"When vite is packaged, the specified module is imported from CDN instead.  Script tag and link tag can be inserted into the specified location.","archived":false,"fork":false,"pushed_at":"2023-06-26T08:41:59.000Z","size":125,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-05T12:47:13.270Z","etag":null,"topics":["cdn","external","global","plugin","vite","vue"],"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/lihanspace.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,"governance":null}},"created_at":"2021-10-12T01:54:56.000Z","updated_at":"2023-11-07T13:54:15.000Z","dependencies_parsed_at":"2022-09-26T22:11:03.488Z","dependency_job_id":"22ecbee5-7d7b-4914-962f-435e1ddaa995","html_url":"https://github.com/lihanspace/vite-plugin-inject-externals","commit_stats":{"total_commits":26,"total_committers":2,"mean_commits":13.0,"dds":"0.038461538461538436","last_synced_commit":"ee8247208ca8b2019f7711301b146e0ed4304f61"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lihanspace%2Fvite-plugin-inject-externals","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lihanspace%2Fvite-plugin-inject-externals/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lihanspace%2Fvite-plugin-inject-externals/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lihanspace%2Fvite-plugin-inject-externals/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lihanspace","download_url":"https://codeload.github.com/lihanspace/vite-plugin-inject-externals/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253591724,"owners_count":21932878,"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":["cdn","external","global","plugin","vite","vue"],"created_at":"2025-05-11T15:36:58.293Z","updated_at":"2025-05-11T15:36:58.852Z","avatar_url":"https://github.com/lihanspace.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003evite-plugin-inject-externals\u003c/h1\u003e\n\n[简体中文](./README.zh-CN.md) | English\n\nWhen vite is packaged, the specified module is imported from CDN instead.\n\nScript tag and link tag can be injected into the specified location.\n\nReduce build time and increase page load speed in production environments.\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://npmjs.com/package/vite-plugin-inject-externals\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vite-plugin-inject-externals.svg?style=plastic\u0026color=cb0303\" alt=\"npm package\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://npmjs.com/package/vite-plugin-inject-externals\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/vite-plugin-inject-externals.svg?style=plastic\u0026color=eb7738\" alt=\"npm downloads/month\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://npmjs.com/package/vite-plugin-inject-externals\"\u003e\u003cimg src=\"https://img.shields.io/bundlephobia/min/vite-plugin-inject-externals.svg?style=plastic\u0026color=12bd79\" alt=\"npm minified size\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/lihanspace/vite-plugin-inject-externals/releases\"\u003e\u003cimg src=\"https://img.shields.io/github/v/release/lihanspace/vite-plugin-inject-externals.svg?display_name=release\u0026sort=semver\u0026style=plastic\" alt=\"github release\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/lihanspace/vite-plugin-inject-externals/blob/master/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/github/license/lihanspace/vite-plugin-inject-externals.svg?style=plastic\" alt=\"License\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Installation\n\nInstall the plugin with npm:\n\n```shell\nnpm install --save-dev vite-plugin-inject-externals\n```\n\n## Basic Usage\n\n```js\n// vite.config.js\nimport injectExternals from 'vite-plugin-inject-externals'\n\nexport default {\n  plugins: [\n    injectExternals({\n      // Default value: 'head-prepend'\n      // The custom injection location will replace the corresponding text in index.html\n      injectTo: '\u003c!-- Custom placeholder for vite plugin inject externals --\u003e',\n      modules: [\n        {\n          name: 'vue',\n          global: 'Vue',\n          path: 'https://unpkg.com/vue@3.2.19/dist/vue.global.prod.js'\n        },\n        {\n          name: 'axios',\n          global: 'axios',\n          // If there are name and global, but there are no path and htmltag, the global variables will be replaced directly, but the script tag will not be injected\n          // path: 'https://cdn.jsdelivr.net/npm/axios@0.22.0/dist/axios.min.js'\n        },\n        {\n          name: 'md-editor-v3',\n          global: 'MdEditorV3',\n          path: 'https://cdn.jsdelivr.net/npm/md-editor-v3@1.5.0/lib/md-editor-v3.umd.js',\n          injectTo: '\u003c!-- example2 --\u003e'\n        },\n        // If there is path but no global, the link tag will be injected\n        {\n          name: 'md-editor-v3/lib/style.css',\n          // If there is a name but no global, the import of name will be deleted, which is only applicable to bare imports(import 'md-editor-v3/lib/style.css')\n          path: 'https://cdn.jsdelivr.net/npm/md-editor-v3@1.5.0/lib/style.css',\n        }\n      ]\n    })\n  ],\n}\n```\n\n## Result\n\n```js\n// dev\nimport { createApp } from 'vue'\nimport axios from 'axios'\nimport MdEditorV3 from 'md-editor-v3'\nimport 'md-editor-v3/lib/style.css'\n\ncreateApp()\naxios()\nconsole.log(MdEditorV3)\n\n// build\nVue.createApp()\naxios()\nconsole.log(MdEditorV3)\n```\n\n```html\n\u003c!-- Inject CDN links --\u003e\n\u003cscript type=\"text/javascript\" src=\"https://unpkg.com/vue@3.2.19/dist/vue.global.prod.js\"\u003e\u003c/script\u003e\n```\n\n## Extended usage\n\n```js\n// vite.config.js\nimport injectExternals from 'vite-plugin-inject-externals'\n\nexport default {\n  plugins: [\n    injectExternals({\n      // Default value: 'head-prepend'\n      // The custom injection location will replace the corresponding text in index.html\n      injectTo: '\u003c!-- Custom placeholder for vite plugin inject externals --\u003e',\n      modules: [\n        {\n          name: 'vue',\n          // When the import method is bare imports(import 'md-editor-v3/lib/style.css'), and there is a name('md-editor-v3/lib/style.css') but no global, the import will be deleted.\n          // When the import method is not bare imports, and there are name and global, the global variables will be replaced.\n          global: 'Vue',\n          // If there is a path, the script tag will be injected if there are name and global.\n          // If there is a path, the link tag will be injected if there is no global.\n          path: 'https://unpkg.com/vue@3.2.19/dist/vue.global.prod.js',\n          // Custom HTML tags with higher priority than path\n          htmlTag: {\n            tag: 'script',\n            attrs: {\n              type: 'text/javascript',\n              crossorigin: '',\n              src: 'https://unpkg.com/vue@3.2.19/dist/vue.global.prod.js'\n            }\n          },\n          // Module has no injectto. The injectto of the previous layer is the default\n          injectTo: '\u003c!-- Custom1 --\u003e'\n        }\n      ]\n    })\n  ],\n}\n```\n\n## InjectExternalsConfig\n\n|   Name   |  Required |                                                                     Desc                                                                     |                             Type                             |     Default      |\n|:--------:|:---------:|:--------------------------------------------------------------------------------------------------------------------------------------------:|:------------------------------------------------------------:|:----------------:|\n| command  |  `false`  | Inject HTML tag when running which command, A value of true indicates that HTML tags are injected when both build and serve commands are run |                       `'build' / true`                       |    `'build'`     |\n| injectTo |  `false`  |                                                       Location of HTML tags injection                                                        | `'head' / 'body' / 'head-prepend' / 'body-prepend' / string` | `'head-prepend'` |\n| modules  |  `true`   |                                                            Modules configuration                                                             |                  `InjectExternalsModule[]`                   |       `[]`       |\n\n### InjectExternalsModule\n\n|   Name   | Required |                                              Desc                                               |   Type    |                    Default       |\n|:--------:|:--------:|:-----------------------------------------------------------------------------------------------:|:---------:|:--------------------------------:|\n|   name   | `false`  |                                           Module name                                           | `string`  |\n|  global  | `false`  |                          Global variables corresponding to the module                           | `string`  |\n|   path   |  `true`  | CDN link of JS or CSS resources. If there is no global, it indicates that it is a CSS resource. | `string`  |\n| htmlTag  |  `true`  |                         Custom HTML tags, priority is higher than path.                         | `HtmlTag` |\n| injectTo | `false`  |                                 Location of HTML tags injection                                 | `string`  | `InjectExternalsConfig.injectTo` | \n\n#### HtmlTag\n\n| Name  | Required |                         Desc                          |   Type   | Default |\n|:-----:|:--------:|:-----------------------------------------------------:|:--------:|:-------:|\n|  tag  |  `true`  |                       Tag name                        | `string` |\n| attrs | `false`  | Attributes(`{ 'Attribute name': 'Attribute value' }`) | `object` |\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flihanspace%2Fvite-plugin-inject-externals","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flihanspace%2Fvite-plugin-inject-externals","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flihanspace%2Fvite-plugin-inject-externals/lists"}