{"id":13417142,"url":"https://github.com/electron-vite/vite-plugin-electron-renderer","last_synced_at":"2025-06-20T09:39:49.924Z","repository":{"id":40612608,"uuid":"507427836","full_name":"electron-vite/vite-plugin-electron-renderer","owner":"electron-vite","description":" Ployfill Node.js API for Renderer process","archived":false,"fork":false,"pushed_at":"2024-09-20T07:47:38.000Z","size":430,"stargazers_count":115,"open_issues_count":6,"forks_count":12,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-09T11:45:28.410Z","etag":null,"topics":[],"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/electron-vite.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-25T22:18:11.000Z","updated_at":"2025-06-08T20:23:45.000Z","dependencies_parsed_at":"2024-01-07T18:05:11.643Z","dependency_job_id":"16995613-9109-4e43-b393-d14197e35053","html_url":"https://github.com/electron-vite/vite-plugin-electron-renderer","commit_stats":{"total_commits":134,"total_committers":3,"mean_commits":"44.666666666666664","dds":"0.014925373134328401","last_synced_commit":"8afc1ffdd94c79e907f581e44fee7e5408d7919e"},"previous_names":[],"tags_count":38,"template":false,"template_full_name":null,"purl":"pkg:github/electron-vite/vite-plugin-electron-renderer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electron-vite%2Fvite-plugin-electron-renderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electron-vite%2Fvite-plugin-electron-renderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electron-vite%2Fvite-plugin-electron-renderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electron-vite%2Fvite-plugin-electron-renderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/electron-vite","download_url":"https://codeload.github.com/electron-vite/vite-plugin-electron-renderer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electron-vite%2Fvite-plugin-electron-renderer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260920707,"owners_count":23083044,"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":[],"created_at":"2024-07-30T22:00:33.003Z","updated_at":"2025-06-20T09:39:44.909Z","avatar_url":"https://github.com/electron-vite.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"170\" src=\"https://github.com/electron-vite/vite-plugin-electron/blob/main/logo.svg?raw=true\"\u003e\n\u003c/p\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003evite-plugin-electron-renderer\u003c/h1\u003e\n\u003c/div\u003e\n\u003cp align=\"center\"\u003eSupport use Node.js API in Electron-Renderer\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://npmjs.com/package/vite-plugin-electron-renderer\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/vite-plugin-electron-renderer.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmjs.com/package/vite-plugin-electron-renderer\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/vite-plugin-electron-renderer.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://discord.gg/YfjFuEgVUR\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/chat-discord-blue?logo=discord\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cstrong\u003e\n    \u003cspan\u003eEnglish\u003c/span\u003e\n    |\n    \u003ca href=\"https://github.com/electron-vite/vite-plugin-electron-renderer/blob/main/README.zh-CN.md\"\u003e简体中文\u003c/a\u003e\n  \u003c/strong\u003e\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\nIn short, `vite-plugin-electron-renderer` is responsible for polyfilling Electron, Node.js built-in modules.\n\n## Install\n\n```sh\nnpm i vite-plugin-electron-renderer -D\n```\n\n## Usage\n\n1. This just modifies some of Vite's default config to make the Renderer process works.\n\n```js\nimport renderer from 'vite-plugin-electron-renderer'\n\nexport default {\n  plugins: [\n    renderer(),\n  ],\n}\n```\n\n2. Using the third-part `C/C++`, `esm` package in the Renderer process.\n\n```js\nimport renderer from 'vite-plugin-electron-renderer'\n\nexport default {\n  plugins: [\n    renderer({\n      resolve: {\n        // C/C++ modules must be pre-bundle\n        serialport: { type: 'cjs' },\n        // `esm` modules only if Vite does not pre-bundle them correctly\n        got: { type: 'esm' },\n      },\n    }),\n  ],\n}\n```\n\n\u003e By the way, if a module is marked as `type: 'cjs'`, the plugin just loads it in using `require()`. So it should be put into `dependencies`.\n\n## API *(Define)*\n\n`renderer(options: RendererOptions)`\n\n```ts\nexport interface RendererOptions {\n  /**\n   * Explicitly tell Vite how to load modules, which is very useful for C/C++ and `esm` modules\n   * \n   * - `type.cjs` just wraps esm-interop\n   * - `type.esm` pre-bundle to `cjs` and wraps esm-interop\n   * \n   * @experimental\n   */\n  resolve?: {\n    [module: string]: {\n      type: 'cjs' | 'esm',\n      /** Full custom how to pre-bundle */\n      build?: (args: {\n        cjs: (module: string) =\u003e Promise\u003cstring\u003e,\n        esm: (module: string, buildOptions?: import('esbuild').BuildOptions) =\u003e Promise\u003cstring\u003e,\n      }) =\u003e Promise\u003cstring\u003e\n    }\n  }\n}\n```\n\n## [Examples](https://github.com/electron-vite/vite-plugin-electron-renderer/tree/main/examples)\n\n- [quick-start](https://github.com/electron-vite/vite-plugin-electron-renderer/tree/main/examples/quick-start)\n\n## How to work\n\n\u003c!-- ###### Electron-Renderer(vite serve) --\u003e\n\n\u003e Load Electron and Node.js cjs-packages/built-in-modules (Schematic)\n\n```\n ┏————————————————————————————————————————┓                 ┏—————————————————┓\n │ import { ipcRenderer } from 'electron' │                 │ Vite dev server │\n ┗————————————————————————————————————————┛                 ┗—————————————————┛\n                 │                                                   │\n                 │ 1. Pre-Bundling electron module into              │\n                 │    node_modules/.vite-electron-renderer/electron  │\n                 │                                                   │\n                 │ 2. HTTP(Request): electron module                 │\n                 │ ————————————————————————————————————————————————\u003e │\n                 │                                                   │\n                 │ 3. Alias redirects to                             │\n                 │    node_modules/.vite-electron-renderer/electron  │\n                 │    ↓                                              │\n                 │    const { ipcRenderer } = require('electron')    │\n                 │    export { ipcRenderer }                         │\n                 │                                                   │\n                 │ 4. HTTP(Response): electron module                │\n                 │ \u003c———————————————————————————————————————————————— │\n                 │                                                   │\n ┏————————————————————————————————————————┓                 ┏—————————————————┓\n │ import { ipcRenderer } from 'electron' │                 │ Vite dev server │\n ┗————————————————————————————————————————┛                 ┗—————————————————┛\n```\n\n\u003c!--\n###### Electron-Renderer(vite build)\n\n1. Add \"fs module\" to `rollupOptions.external`.\n2. Modify `rollupOptions.output.format` to `cjs` *(If it you didn't explicitly set it)*.\n\n```js\nimport { ipcRenderer } from 'electron'\n↓\nconst { ipcRenderer } = require('electron')\n```\n--\u003e\n\n## Dependency Pre-Bundling\n\n**In general**. Vite will pre-bundle all third-party modules in a Web-based usage format, but it can not adapt to Electron Renderer process especially C/C++ modules. So we must be make a little changes for this.\n\n\u003c!-- When a module detected as a `cjs` module. it will be pre-bundle like the following. --\u003e\n\n```js\n// 👉 https://github.com/electron-vite/vite-plugin-electron-renderer/blob/v0.13.0/src/optimizer.ts#L139-L142\nconst _M_ = require(\"serialport\");\n\nexport default (_M_.default || _M_);\nexport const SerialPort = _M_.SerialPort;\n// export other members ...\n```\n\n\u003c!--\n**By the way**. If an npm package is a pure ESM format package, and the packages it depends on are also in ESM format, then put it in `optimizeDeps.exclude` and it will work normally.  \n[See the explanation](https://github.com/electron-vite/vite-plugin-electron-renderer/blob/v0.10.3/examples/quick-start/vite.config.ts#L33-L36)\n--\u003e\n\n## dependencies vs devDependencies\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003cth\u003eClassify\u003c/th\u003e\n    \u003cth\u003ee.g.\u003c/th\u003e\n    \u003cth\u003edependencies\u003c/th\u003e\n    \u003cth\u003edevDependencies\u003c/th\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eNode.js C/C++ native modules\u003c/td\u003e\n      \u003ctd\u003eserialport, sqlite3\u003c/td\u003e\n      \u003ctd\u003e✅\u003c/td\u003e\n      \u003ctd\u003e❌\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eNode.js CJS packages\u003c/td\u003e\n      \u003ctd\u003eelectron-store\u003c/td\u003e\n      \u003ctd\u003e✅\u003c/td\u003e\n      \u003ctd\u003e✅\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eNode.js ESM packages\u003c/td\u003e\n      \u003ctd\u003eexeca, got, node-fetch\u003c/td\u003e\n      \u003ctd\u003e✅\u003c/td\u003e\n      \u003ctd\u003e✅ (Recommend)\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eWeb packages\u003c/td\u003e\n      \u003ctd\u003eVue, React\u003c/td\u003e\n      \u003ctd\u003e✅\u003c/td\u003e\n      \u003ctd\u003e✅ (Recommend)\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n#### Why is it recommended to put properly buildable packages in `devDependencies`?\n\nDoing so will reduce the size of the packaged APP by [electron-builder](https://github.com/electron-userland/electron-builder).\n\n\u003c!--\n## Config presets (Opinionated)\n\nIf you do not configure the following options, the plugin will modify their default values\n\n- `build.cssCodeSplit = false` (*TODO*)\n- `build.rollupOptions.output.format = 'cjs'` (nodeIntegration: true)\n- `resolve.conditions = ['node']`\n- `optimizeDeps.exclude = ['electron']` - always\n--\u003e\n","funding_links":[],"categories":["Get Started"],"sub_categories":["Templates"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felectron-vite%2Fvite-plugin-electron-renderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felectron-vite%2Fvite-plugin-electron-renderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felectron-vite%2Fvite-plugin-electron-renderer/lists"}