diff --git a/README.md b/README.md index 9ca8bd5..ceb9894 100644 --- a/README.md +++ b/README.md @@ -9,21 +9,6 @@ 🥳 Simple `Electron` + `Vue3` + `Vite2` boilerplate. Build based on rollup and ⚡️vite. -## Feature -- HRM - - * `Main process` hot restart - * `Preload script` hot reload - * `Renderer process` hot module replacement -- power by Vite - -- Beautiful log -- power by concurrently - - * `[R]` means `Renderer process` - * `[P]` means `Preload script` - * `[M]` means `Main process` - - - ## Run Setup ```bash @@ -40,42 +25,66 @@ yarn dev ``` +## Directory + +```tree +├ +├── configs +├ ├── vite-main.config.ts Main-process config file, for -> src/main +├ ├── vite-preload.config.ts Preload-script config file, for -> src/preload +├ ├── vite-renderer.config.ts Renderer-script config file, for -> src/renderer +├ +├── scripts +├ ├── build.mjs Build script, for -> npm run build +├ ├── electron-builder.config.mjs +├ ├── watch.mjs Develop script, for -> npm run dev +├ +├── src +├ ├── main Main-process source code +├ ├── preload Preload-script source code +├ ├── renderer Renderer-process source code +├ +``` + +#### `dist` and `src` + +- Once started or packaged, the script is executed. As like as two peas, the `dist` directory structure will be generated as `src`. + +- This ensures the accuracy of path calculation. + +```tree +├── dist +| ├── main +| ├── preload +| ├── renderer +├── src +| ├── main +| ├── preload +| ├── renderer +| +``` + ## Communication -- All NodeJs、Electron API invoke passed `Preload script` - * **src/preload/index.ts** +**All NodeJs、Electron API invoke passed `Preload-script`** - ```typescript - // --------- Expose some API to Renderer process. --------- - contextBridge.exposeInMainWorld('fs', fs) - contextBridge.exposeInMainWorld('ipcRenderer', ipcRenderer) - ``` +* **src/preload/index.ts** - * **typings/global.d.ts** + ```typescript + // --------- Expose some API to Renderer process. --------- + contextBridge.exposeInMainWorld('fs', fs) + contextBridge.exposeInMainWorld('ipcRenderer', ipcRenderer) + ``` - ```typescript - interface Window { - fs: typeof import('fs') - ipcRenderer: import('electron').IpcRenderer - } - ``` +* **src/renderer/src/main.ts** - * **src/render/main.ts** - - ```typescript - console.log('fs', window.fs) - console.log('ipcRenderer', window.ipcRenderer) - ``` -## Branchs -- [ant-design-vue](https://github.com/caoxiemeihao/electron-vue-vite/tree/ant-design-vue) - * [x] Use tsx - * [x] Integration ant-design-vue -- [element-plus](https://github.com/caoxiemeihao/electron-vue-vite/tree/element-plus) `登录窗口、element-ui 这个可能很适合你` 🚀 - * [x] With multiple BrowserWindow - * [x] Integration element-plus + ```typescript + console.log('fs', window.fs) + console.log('ipcRenderer', window.ipcRenderer) + ``` ## Mian window - + ## Wechat group diff --git a/README.zh-CN.md b/README.zh-CN.md index 915da15..7bdc121 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -25,63 +25,45 @@ yarn dev ``` -## 工作原理 +## 目录结构 -#### `main`、`preload`、`render` - -* **这个三个 Electron 中的重要概念会贯穿整个模板的脚本与源码的设计** - -* **它们分别对应 主进程(main-process)、预加载脚本(preload-script)、渲染进程(renderer-process)** - -* **设计上，它们构建脚本独立、源码独立** - -#### 顶层只有 `scripts`、`src` 两个目录 - -* `scripts` 负责 主进程(main-process) 与 预加载脚本(preload-script) 的编译、热更新功能 - -* `src` 项目目录源码 -- `见名知意` - -#### `package.json[scripts]` 中提供了三个对应的 开发(dev) 与 构建(build) 命令 - -* `dev:render` 对应 `vite serve` 提供开发期的 `renderer-process` 热更新 (vite 提供的 HMR 功能) - -* `dev:preload` 对应 `scripts/build-preload.ts --watch` 提供开发期的 `preload-script` 重载 (通过 WebSocket 通知页面刷新即可重新加载 preload-script) - -* `dev:main` 对应 `scripts/build-main.ts --watch` 提供开发期的 `main-process` 重启 (直接杀死当前 Electron 应用，然后重新拉起) - -* `dev` 由 `concurrently` 组合的上面三个命令，并且提供 `[R]`、`[P]`、`[M]` 三个前缀提高 log 的辨识度 - -* - -* ---- - -* `build:render` 对应 `vite build` 构建 `renderer-process` 代码 (vite) - -* `build:preload` 对应 `vite build` 构建 `scripts/build-preload.ts` 代码 (rollup) - -* `build:main` 对应 `vite build` 构建 `scripts/build-main.ts` 代码 (rollup) - -* `build` 串联了上述三个命令，之后运行了 `electron-builder` - -* ---- +```tree +├ +├── configs +├ ├── vite-main.config.ts 主进程配置文件，编译 src/main +├ ├── vite-preload.config.ts 预加载脚本配置文件，编译 src/preload +├ ├── vite-renderer.config.ts 渲染进程配置文件，编译 src/renderer +├ +├── scripts +├ ├── build.mjs 项目构建脚本，对应 npm run build +├ ├── electron-builder.config.mjs +├ ├── watch.mjs 项目开发脚本，对应 npm run dev +├ +├── src +├ ├── main 主进程源码 +├ ├── preload 预加载脚本源码 +├ ├── renderer 渲染进程源码 +├ +``` #### dist 与 src - 一旦启动或打包脚本执行过，会在根目录产生 **`dist` 文件夹，里面的文件夹同 `src` 一模一样** +- 在使用一些路径计算时，尤其是相对路径计算；`dist` 与 `src` 里面保持相同的目录结构能避开好多问题 + ```tree ├── dist | ├── main | ├── preload - | ├── render + | ├── renderer ├── src | ├── main | ├── preload - | ├── render + | ├── renderer | ``` -- 在使用一些路径计算时，尤其是相对路径计算；`dist` 与 `src` 里面保持相同的目录结构能避开好多问题 ## 渲染进程使用 NodeJs API @@ -91,46 +73,20 @@ - 推荐所有的 NodeJs、Electron API 通过 `preload-script` 注入到 渲染进程中，例如： - * **src/preload/index.ts** +* **src/preload/index.ts** - ```typescript - // --------- Expose some API to Renderer process. --------- - contextBridge.exposeInMainWorld('fs', fs) - contextBridge.exposeInMainWorld('ipcRenderer', ipcRenderer) - ``` + ```typescript + // --------- Expose some API to Renderer process. --------- + contextBridge.exposeInMainWorld('fs', fs) + contextBridge.exposeInMainWorld('ipcRenderer', ipcRenderer) + ``` - * **typings/global.d.ts** +* **src/renderer/main.ts** - ```typescript - interface Window { - fs: typeof import('fs') - ipcRenderer: import('electron').IpcRenderer - } - ``` - - * **src/render/main.ts** - - ```typescript - console.log('fs', window.fs) - console.log('ipcRenderer', window.ipcRenderer) - ``` -## 关于技术选型 - -- 最早开始这个项目时 `Vite` 还在 1.0 阶段，基本是给个验性的工具； - - 所以 主进程(main-process)、预加载脚本(preload-script) 需要额外用 `Rollup` 打包； - - 选择 `Rollup` 构建主要是两点原因 - - * 一来构建出来的代码很清晰尤其是对比 `Webpack` - - * 二来是本身 `Vite` 也是基于 `Rollup` 的，所以能通用很多包，少装点依赖，统一技术栈 - -- 如果你嫌这个项目(Rollup)运行慢；你可以尝试下我的另一模板，所有代码均使用 `Vite` 构建； - - 速度上确实要比这个快很多，顺便还集成了 `React` 🎉 - - * 👉 [⚡️ Super-fast vite + electron boilerplate. Support React/Vue template.](https://github.com/caoxiemeihao/vite-electron-boilerplate) + ```typescript + console.log('fs', window.fs) + console.log('ipcRenderer', window.ipcRenderer) + ``` ## 运行效果