80 lines
3.6 KiB
Markdown
80 lines
3.6 KiB
Markdown
# electron-vite-react
|
|
|
|
[](https://github.com/vitejs/awesome-vite)
|
|
|
|
|
|
|
|
[](https://nodejs.org/about/releases)
|
|
|
|
English | [简体中文](README.zh-CN.md)
|
|
|
|
## Overview
|
|
|
|
📦 Out of the box
|
|
🎯 Based on the official [react-ts](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) template, less invasive
|
|
🌱 Extensible, really simple directory structure
|
|
💪 Support using Node.js API in Electron-Renderer
|
|
🔩 Support C/C++ native addons
|
|
🖥 It's easy to implement multiple windows
|
|
|
|
## Quick start
|
|
|
|
```sh
|
|
npm create electron-vite
|
|
```
|
|
|
|
|
|
|
|
## Debug
|
|
|
|
|
|
|
|
## Directory structure
|
|
|
|
*🚨 By default, the files in `electron` folder will be built into the `dist/electron`*
|
|
|
|
```tree
|
|
├── electron Electron-related code
|
|
│ ├── main Main-process source code
|
|
│ ├── preload Preload-script source code
|
|
│ └── resources Resources for the production build
|
|
│ ├── icon.icns Icon for the application on macOS
|
|
│ ├── icon.ico Icon for the application
|
|
│ ├── installerIcon.ico Icon for the application installer
|
|
│ └── uninstallerIcon.ico Icon for the application uninstaller
|
|
│
|
|
├── release Generated after production build, contains executables
|
|
│ └── {version}
|
|
│ ├── {os}-unpacked Contains unpacked application executable
|
|
│ └── Setup.{ext} Installer for the application
|
|
│
|
|
├── public Static assets
|
|
└── src Renderer source code, your React application
|
|
```
|
|
|
|
## 🚨 `dependencies` vs `devDependencies`
|
|
|
|
**Put Node.js packages in `dependencies`**
|
|
|
|
**e.g.** `electron-store` `sqlite3` `serilaport` `mongodb` ...others
|
|
|
|
**Put Web packages in `devDependencies`**
|
|
|
|
**e.g.** `react` `react-dom` `react-router` `mobx` `zustand` `antd` `axios` ...others
|
|
|
|
See more 👉 [dependencies vs devDependencies](https://github.com/electron-vite/vite-plugin-electron-renderer#dependencies-vs-devdependencies)
|
|
|
|
## 🚨 Node.js ESM packages
|
|
|
|
**e.g.** `node-fetch` `execa` `got` ...
|
|
|
|
[👉 Using Node.js ESM packages in Electron-Renderer](https://github.com/electron-vite/vite-plugin-electron-renderer#-nodejs-esm-packages)
|
|
|
|
<!--
|
|
- First, you need to know if your dependencies are needed after the application is packaged.
|
|
|
|
- Like [serialport](https://www.npmjs.com/package/serialport), [sqlite3](https://www.npmjs.com/package/sqlite3) they are node-native modules and should be placed in `dependencies`. In addition, Vite will not build them, but treat them as external modules.
|
|
|
|
- Dependencies like [Vue](https://www.npmjs.com/package/vue) and [React](https://www.npmjs.com/package/react), which are pure javascript modules that can be built with Vite, can be placed in `devDependencies`. This reduces the size of the application.
|
|
-->
|