docs: update

This commit is contained in:
草鞋没号 2022-02-09 09:05:13 +08:00
parent 3ca324376e
commit d168266121
2 changed files with 35 additions and 22 deletions

View File

@ -36,7 +36,7 @@ npm run build
## Directory structure
Once `dev` or `build` npm-script is executed, the `dist` folder will be generated. It has the same structure as the `src` folder, the purpose of this design is to ensure the correct path calculation.
Once `dev` or `build` npm-script is executed, the `dist` folder will be generated. It has the same structure as the `packages` folder, the purpose of this design is to ensure the correct path calculation.
```tree
@ -46,7 +46,7 @@ Once `dev` or `build` npm-script is executed, the `dist` folder will be generate
├ ├── installerIcon.ico Icon for the application installer
├ ├── uninstallerIcon.ico Icon for the application uninstaller
├── dist Generated after build according to the "src" directory
├── dist Generated after build according to the "packages" directory
├ ├── main
├ ├── preload
├ ├── renderer
@ -57,15 +57,16 @@ Once `dev` or `build` npm-script is executed, the `dist` folder will be generate
├ ├── Setup.exe Installer for the application
├── scripts
├ ├── build.mjs Build script, for -> npm run build
├ ├── vite.config.mjs Marin-process, Preload-script vite-config
├ ├── watch.mjs Develop script, for -> npm run dev
├ ├── build.mjs Develop script -> npm run build
├ ├── watch.mjs Develop script -> npm run dev
├── src
├── packages
├ ├── main Main-process source code
├ ├── vite.config.ts
├ ├── preload Preload-script source code
├ ├── vite.config.ts
├ ├── renderer Renderer-process source code
├ ├── vite.config.ts Renderer-process vite-config
├ ├── vite.config.ts
```
@ -75,7 +76,7 @@ Once `dev` or `build` npm-script is executed, the `dist` folder will be generate
#### Invoke Electron and NodeJS API in `Preload-script`
- **src/preload/index.ts**
- **packages/preload/index.ts**
```typescript
import fs from "fs"
@ -86,7 +87,7 @@ Once `dev` or `build` npm-script is executed, the `dist` folder will be generate
contextBridge.exposeInMainWorld("ipcRenderer", ipcRenderer)
```
- **src/renderer/src/global.d.ts**
- **packages/renderer/src/global.d.ts**
```typescript
// Defined in the window
@ -96,7 +97,7 @@ Once `dev` or `build` npm-script is executed, the `dist` folder will be generate
}
```
- **src/renderer/src/main.ts**
- **packages/renderer/src/main.ts**
```typescript
// Use Electron and NodeJS API in the Renderer-process
@ -111,7 +112,7 @@ Once `dev` or `build` npm-script is executed, the `dist` folder will be generate
- Main-process, Preload-script are also built with Vite, and they're built as [build.lib](https://vitejs.dev/config/#build-lib).
So they just need to configure Rollup.
**Click to see more** 👉 [scripts/vite.config.mjs](https://github.com/caoxiemeihao/electron-vue-vite/blob/main/scripts/vite.config.mjs)
**Click to see more** 👉 [packages/main/vite.config.ts](https://github.com/caoxiemeihao/vite-react-electron/blob/main/packages/main/vite.config.ts)
```js
export default {

View File

@ -33,25 +33,37 @@
## 目录
一旦启动或打包脚本执行过,会在根目录产生 **`dist` 文件夹,里面的文件夹同 `src` 一模一样**;在使用一些路径计算时,尤其是相对路径计算;`dist` 与 `src` 里面保持相同的目录结构能避开好多问题
一旦启动或打包脚本执行过,会在根目录产生 **`dist` 文件夹,里面的文件夹同 `packages` 一模一样**;在使用一些路径计算时,尤其是相对路径计算;`dist` 与 `packages` 里面保持相同的目录结构能避开好多问题
```tree
├── dist 构建后,根据 src 目录生成
├── build 用于生产构建的资源
├ ├── icon.icns 应用图标(macOS)
├ ├── icon.ico 应用图标
├ ├── installerIcon.ico 安装图标
├ ├── uninstallerIcon.ico 卸载图标
├── dist 构建后,根据 packages 目录生成
├ ├── main
├ ├── preload
├ ├── renderer
├── scripts
├ ├── build.mjs 项目构建脚本,对应 npm run build
├── vite.config.mjs 主进程, 预加载脚本源码 vite 配置
├── watch.mjs 项目开发脚本,对应 npm run dev
├── release 在生产构建后生成,包含可执行文件
├ ├── {version}
├── win-unpacked 包含未打包的应用程序可执行文件
├── Setup.exe 应用程序的安装程序
├── src
├── scripts
├ ├── build.mjs 项目开发脚本 npm run build
├ ├── watch.mjs 项目开发脚本 npm run dev
├── packages
├ ├── main 主进程源码
├ ├── vite.config.ts
├ ├── preload 预加载脚本源码
├ ├── vite.config.ts
├ ├── renderer 渲染进程源码
├ ├── vite.config.ts 渲染进程 vite 配置
├ ├── vite.config.ts
```
@ -73,7 +85,7 @@ electron-builder 打包时候会将 dependencies 中的包打包到 app.asar 里
**推荐所有的 NodeJs、Electron API 通过 `Preload-script` 注入到 渲染进程中,例如:**
* **src/preload/index.ts**
* **packages/preload/index.ts**
```typescript
import fs from 'fs'
@ -84,7 +96,7 @@ electron-builder 打包时候会将 dependencies 中的包打包到 app.asar 里
contextBridge.exposeInMainWorld('ipcRenderer', ipcRenderer)
```
* **src/renderer/src/global.d.ts**
* **packages/renderer/src/global.d.ts**
```typescript
// Defined on the window
@ -94,7 +106,7 @@ electron-builder 打包时候会将 dependencies 中的包打包到 app.asar 里
}
```
* **src/renderer/main.ts**
* **packages/renderer/main.ts**
```typescript
// Use Electron, NodeJs API in Renderer-process