Builder config, icons and typos in README
This commit is contained in:
Paul
parent
ef7e6f5814
commit
d72137c3bd
|
|
@ -0,0 +1,38 @@
|
|||
/**
|
||||
* @type {import('electron-builder').Configuration}
|
||||
* @see https://www.electron.build/configuration/configuration
|
||||
*/
|
||||
module.exports = {
|
||||
appId: "YourAppID@qq.com",
|
||||
productName: "YourAppName",
|
||||
copyright: "Copyright © 2022 ${author}",
|
||||
asar: true,
|
||||
directories: {
|
||||
output: "release/${version}",
|
||||
buildResources: "build",
|
||||
},
|
||||
files: ["dist"],
|
||||
win: {
|
||||
target: [
|
||||
{
|
||||
target: "nsis",
|
||||
arch: ["x64"],
|
||||
},
|
||||
],
|
||||
artifactName: "${productName}-${version}-Setup.${ext}",
|
||||
},
|
||||
nsis: {
|
||||
oneClick: false,
|
||||
perMachine: false,
|
||||
allowToChangeInstallationDirectory: true,
|
||||
deleteAppDataOnUninstall: false,
|
||||
},
|
||||
mac: {
|
||||
target: ["dmg"],
|
||||
artifactName: "${productName}-${version}-Installer.${ext}",
|
||||
},
|
||||
linux: {
|
||||
target: ["AppImage"],
|
||||
artifactName: "${productName}-${version}-Installer.${ext}",
|
||||
},
|
||||
}
|
||||
91
README.md
91
README.md
|
|
@ -13,35 +13,49 @@
|
|||
|
||||
- Contains only the basic dependencies.
|
||||
|
||||
- The extend is very flexible.
|
||||
- The extension is very flexible.
|
||||
|
||||
## Run Setup
|
||||
## Installation
|
||||
|
||||
```bash
|
||||
# clone the project
|
||||
git clone git@github.com:caoxiemeihao/vite-react-electron.git
|
||||
|
||||
# enter the project directory
|
||||
# open the project directory
|
||||
cd vite-react-electron
|
||||
|
||||
# install dependency
|
||||
# install dependencies
|
||||
npm install
|
||||
|
||||
# develop
|
||||
# start the application
|
||||
npm run dev
|
||||
|
||||
# make a production build
|
||||
npm run build
|
||||
```
|
||||
|
||||
## Directory
|
||||
## Directory structure
|
||||
|
||||
Once `dev` or `build` npm-script executed will be generate named `dist` folder. It has children dir of same as `src` folder, the purpose of this design can 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 `src` folder, the purpose of this design is to ensure the correct path calculation.
|
||||
|
||||
```tree
|
||||
├
|
||||
├── dist After build, it's generated according to the "src" directory
|
||||
├── build 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
|
||||
├
|
||||
├── dist Generated after build according to the "src" directory
|
||||
├ ├── main
|
||||
├ ├── preload
|
||||
├ ├── renderer
|
||||
├
|
||||
├── release Generated after production build, contains executables
|
||||
├ ├── {version}
|
||||
├ ├── win-unpacked Contains unpacked application executable
|
||||
├ ├── Setup.exe Installer for the application
|
||||
├
|
||||
├── scripts
|
||||
├ ├── build.mjs Build script, for -> npm run build
|
||||
├ ├── vite.config.mjs Marin-process, Preload-script vite-config
|
||||
|
|
@ -55,65 +69,62 @@ Once `dev` or `build` npm-script executed will be generate named `dist` folder.
|
|||
├
|
||||
```
|
||||
|
||||
## Use Electron, NodeJs API
|
||||
## Use Electron and NodeJS API
|
||||
|
||||
> 🚧 By default, Electron don't support the use of API related to Electron and NodeJs in the Renderer-process, but someone still need to use it. If so, you can see the template 👉 **[electron-vite-boilerplate](https://github.com/caoxiemeihao/electron-vite-boilerplate)**
|
||||
> 🚧 By default, Electron doesn't support the use of API related to Electron and NodeJS in the Renderer process, but someone might need to use it. If so, you can see the template 👉 **[electron-vite-boilerplate](https://github.com/caoxiemeihao/electron-vite-boilerplate)**
|
||||
|
||||
#### All Electron, NodeJs API invoke passed `Preload-script`
|
||||
#### Invoke Electron and NodeJS API in `Preload-script`
|
||||
|
||||
* **src/preload/index.ts**
|
||||
- **src/preload/index.ts**
|
||||
|
||||
```typescript
|
||||
import fs from 'fs'
|
||||
import { contextBridge, ipcRenderer } from 'electron'
|
||||
import fs from "fs"
|
||||
import { contextBridge, ipcRenderer } from "electron"
|
||||
|
||||
// --------- Expose some API to Renderer-process. ---------
|
||||
contextBridge.exposeInMainWorld('fs', fs)
|
||||
contextBridge.exposeInMainWorld('ipcRenderer', ipcRenderer)
|
||||
contextBridge.exposeInMainWorld("fs", fs)
|
||||
contextBridge.exposeInMainWorld("ipcRenderer", ipcRenderer)
|
||||
```
|
||||
|
||||
* **src/renderer/src/global.d.ts**
|
||||
- **src/renderer/src/global.d.ts**
|
||||
|
||||
```typescript
|
||||
// Defined on the window
|
||||
// Defined in the window
|
||||
interface Window {
|
||||
fs: typeof import('fs')
|
||||
ipcRenderer: import('electron').IpcRenderer
|
||||
fs: typeof import("fs")
|
||||
ipcRenderer: import("electron").IpcRenderer
|
||||
}
|
||||
```
|
||||
|
||||
* **src/renderer/src/main.ts**
|
||||
- **src/renderer/src/main.ts**
|
||||
|
||||
```typescript
|
||||
// Use Electron, NodeJs API in Renderer-process
|
||||
console.log('fs', window.fs)
|
||||
console.log('ipcRenderer', window.ipcRenderer)
|
||||
// Use Electron and NodeJS API in the Renderer-process
|
||||
console.log("fs", window.fs)
|
||||
console.log("ipcRenderer", window.ipcRenderer)
|
||||
```
|
||||
|
||||
## Use SerialPort, SQLite3 or other node-native addons in Main-process
|
||||
## Use SerialPort, SQLite3, or other node-native addons in the Main-process
|
||||
|
||||
- First, yout need to make sure the deps in "dependencies". Because the project still needs it after packaged.
|
||||
- First, you need to make sure that the dependencies in the `package.json` are NOT in the "devDependencies". Because the project will need them after packaged.
|
||||
|
||||
- Main-process, Preload-script are also built with Vite, and they are just built as [build.lib](https://vitejs.dev/config/#build-lib).
|
||||
- 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 view more** 👉 [scripts/vite.config.mjs](https://github.com/caoxiemeihao/electron-vue-vite/blob/main/scripts/vite.config.mjs)
|
||||
**Click to see more** 👉 [scripts/vite.config.mjs](https://github.com/caoxiemeihao/electron-vue-vite/blob/main/scripts/vite.config.mjs)
|
||||
|
||||
```js
|
||||
export default {
|
||||
build: {
|
||||
// built lib for Main-process, Preload-script
|
||||
lib: {
|
||||
entry: 'index.ts',
|
||||
formats: ['cjs'],
|
||||
fileName: () => '[name].js',
|
||||
entry: "index.ts",
|
||||
formats: ["cjs"],
|
||||
fileName: () => "[name].js",
|
||||
},
|
||||
rollupOptions: {
|
||||
// configuration here
|
||||
external: [
|
||||
'serialport',
|
||||
'sqlite3',
|
||||
],
|
||||
external: ["serialport", "sqlite3"],
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
@ -121,16 +132,16 @@ export default {
|
|||
|
||||
## `dependencies` vs `devDependencies`
|
||||
|
||||
- First, you need to know if deps(npm package) are still needed after packaged.
|
||||
- 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 module and should be placed in `dependencies`. In addition, Vite will not build them, but treat them as external modules.
|
||||
- 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.
|
||||
|
||||
- Like [vue](https://www.npmjs.com/package/vue), [react](https://www.npmjs.com/package/react) they are pure javascript module and can be built with Vite, so they can be placed in `devDependencies`. This reduces the volume of the built project.
|
||||
- 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.
|
||||
|
||||
## Shown
|
||||
## Result
|
||||
|
||||
<img width="400px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/vite-react-electron/react-win.png" />
|
||||
|
||||
## Wechat group
|
||||
## WeChat group
|
||||
|
||||
<img width="244px" src="https://raw.githubusercontent.com/caoxiemeihao/blog/main/assets/wechat/group/qrcode.jpg" />
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
|
|
@ -1,33 +0,0 @@
|
|||
{
|
||||
"appId": "YouAppID@qq.com",
|
||||
"asar": true,
|
||||
"directories": {
|
||||
"output": "release/${version}"
|
||||
},
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"mac": {
|
||||
"artifactName": "${productName}_${version}.${ext}",
|
||||
"target": [
|
||||
"dmg"
|
||||
]
|
||||
},
|
||||
"win": {
|
||||
"target": [
|
||||
{
|
||||
"target": "nsis",
|
||||
"arch": [
|
||||
"x64"
|
||||
]
|
||||
}
|
||||
],
|
||||
"artifactName": "${productName}_${version}.${ext}"
|
||||
},
|
||||
"nsis": {
|
||||
"oneClick": false,
|
||||
"perMachine": false,
|
||||
"allowToChangeInstallationDirectory": true,
|
||||
"deleteAppDataOnUninstall": false
|
||||
}
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
"main": "dist/main/index.cjs",
|
||||
"scripts": {
|
||||
"dev": "node scripts/watch.mjs",
|
||||
"build": "tsc --project src/renderer/tsconfig.json && node scripts/build.mjs && electron-builder"
|
||||
"build": "tsc --project src/renderer/tsconfig.json && node scripts/build.mjs && electron-builder --config .electron-builder.config.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.17.0"
|
||||
|
|
|
|||
Loading…
Reference in New Issue