{"id":13417404,"url":"https://github.com/crcong/vite-plugin-externals","last_synced_at":"2025-04-12T21:53:37.034Z","repository":{"id":44886970,"uuid":"376319068","full_name":"crcong/vite-plugin-externals","owner":"crcong","description":"use to external resources","archived":false,"fork":false,"pushed_at":"2023-07-31T12:06:00.000Z","size":162,"stargazers_count":172,"open_issues_count":12,"forks_count":22,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-12T21:53:30.250Z","etag":null,"topics":["vite","vite-plugin"],"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/crcong.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,"roadmap":null,"authors":null}},"created_at":"2021-06-12T15:06:17.000Z","updated_at":"2025-03-31T00:59:56.000Z","dependencies_parsed_at":"2024-01-07T18:05:09.518Z","dependency_job_id":"8ddd3405-3565-464b-9767-1fa0eaad8735","html_url":"https://github.com/crcong/vite-plugin-externals","commit_stats":{"total_commits":67,"total_committers":8,"mean_commits":8.375,"dds":0.3731343283582089,"last_synced_commit":"4a32583386ad4aa2fa38441c87680b2447e7bdc8"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crcong%2Fvite-plugin-externals","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crcong%2Fvite-plugin-externals/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crcong%2Fvite-plugin-externals/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crcong%2Fvite-plugin-externals/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/crcong","download_url":"https://codeload.github.com/crcong/vite-plugin-externals/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248637831,"owners_count":21137538,"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":["vite","vite-plugin"],"created_at":"2024-07-30T22:00:36.570Z","updated_at":"2025-04-12T21:53:36.929Z","avatar_url":"https://github.com/crcong.png","language":"TypeScript","funding_links":[],"categories":["Plugins","TypeScript"],"sub_categories":["Framework-agnostic Plugins"],"readme":"# vite-plugin-externals\n\n\u003cp\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vite-plugin-externals\" target=\"_blank\"\u003e\n    \u003cimg alt=\"NPM package\" src=\"https://img.shields.io/npm/v/vite-plugin-externals.svg?style=flat\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vite-plugin-externals\" target=\"_blank\"\u003e\n    \u003cimg alt=\"downloads\" src=\"https://img.shields.io/npm/dt/vite-plugin-externals.svg?style=flat\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/vitejs/awesome-vite#helpers\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg\" alt=\"Awesome\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nEnglish | [简体中文](README.zh-CN.md)\n\nuse to external resources, like webpack externals, but only use in browser now.\n\nCan be used in `production` mode without other `rollup` configuration.\n\nbut it will not take effect by default in `commonjs`, such as `ssr`.\n\n## Usage\n\n```bash\nnpm i vite-plugin-externals -D\n```\n\nAdd it to `vite.config.js`\n\n```js\n// vite.config.js\nimport { viteExternalsPlugin } from 'vite-plugin-externals'\n\nexport default {\n  plugins: [\n    viteExternalsPlugin({\n      vue: 'Vue',\n      react: 'React',\n      'react-dom': 'ReactDOM',\n      // value support chain, transform to window['React']['lazy']\n      lazy: ['React', 'lazy']\n    }),\n  ]\n}\n```\n\n**Warning**: If you loaded `production` library in `vite dev mode` , may make `HMR` **fail**.\n\nYou can use `disableInServe: true` option to avoid transform in serve mode.\n\nEg.\n```html\n\u003c!-- may make HMR fail --\u003e\n\u003cscript src=\"./vue.global.prod.js\"\u003e\u003c/script\u003e\n\n\u003c!-- good --\u003e\n\u003cscript src=\"./vue.global.js\"\u003e\u003c/script\u003e\n```\n\n## How to work\n\ntransform source code of js file.\n\n```js\n// configuration\nviteExternalsPlugin({\n  vue: 'Vue',\n}),\n// source code\nimport Vue from 'vue'\n// transformed\nconst Vue = window['Vue']\n\n// source code\nimport { reactive, ref as r } from 'vue'\n// transformed\nconst reactive = window['Vue'].reactive\nconst r = window['Vue'].ref\n\n// source code\nimport * as vue from 'vue'\n// transformed\nconst vue = window['Vue']\n\n// source code\nexport { useState as _useState } from 'react'\n// transformed\nexport const _useState = window['React'].useState\n```\n\n**Warning**: please use the plugin after converting to JS code, because the plugin only transform JS code. Eg.\n\n```js\nimport vue from '@vitejs/plugin-vue'\n\nexport default {\n  plugins: [\n    vue(), // @vitejs/plugin-vue will transform SFC to JS code\n\n    // It should be under @vitejs/plugin-vue\n    viteExternalsPlugin({\n      vue: 'Vue',\n    }),\n  ]\n}\n```\n\nIf an error occurs, you can check whether the error is caused by the plugin order.\n\n## Configuration\n\n### disableInServe\n\ndisable transform in `serve mode` .\n\n```js\nviteExternalsPlugin({\n  vue: 'Vue',\n}, { disableInServe: true })\n```\n\n\n### enforce\n\nvite plugin ordering. Resolve plugin ordering cause unexpected error. Such as [#21](https://github.com/crcong/vite-plugin-externals/issues/21).\n\nSee [https://vitejs.dev/guide/api-plugin.html#plugin-ordering](https://vitejs.dev/guide/api-plugin.html#plugin-ordering).\n\n### filter\n\nThe files in `node_modules` are filtered by default, and only transform js/ts/vue/jsx/tsx file.\n\nYou can specify the `filter` function. Return `true` will be transform to external.\n\n```js\nviteExternalsPlugin({\n  vue: 'Vue',\n}, {\n  filter(code, id, ssr) {\n    // your code\n    return false\n  }\n}),\n```\n\n### useWindow\n\nset `false`, the `window` prefix will not be added.\n\n**Warning**: If your module name has special characters, such as `/`, set useWindow option `false`, will throw error.\n\n```js\nviteExternalsPlugin({\n  vue: 'Vue',\n}, { useWindow: false }),\n\n// source code\nimport Vue from 'vue'\n// transformed, no `const Vue = window['Vue']`\nconst Vue = Vue\n```\n\n### sourceMapOptions\n\nThe configuration item of the code sourcemap after code conversion. The library is `magic-string`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrcong%2Fvite-plugin-externals","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrcong%2Fvite-plugin-externals","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrcong%2Fvite-plugin-externals/lists"}