From 7a2bb92da06fcc41723eeac980bdd588bb77651b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8D=89=E9=9E=8B=E6=B2=A1=E5=8F=B7?= <308487730@qq.com> Date: Wed, 30 Mar 2022 11:15:38 +0800 Subject: [PATCH] docs: 2.0 --- README.zh-CN.md | 124 +++++++----------------------------------------- 1 file changed, 16 insertions(+), 108 deletions(-) diff --git a/README.zh-CN.md b/README.zh-CN.md index bc6c7b5..250ae01 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -1,31 +1,17 @@ -# electron-vue-vite +# electron-vite-vue [![awesome-vite](https://awesome.re/mentioned-badge.svg)](https://github.com/vitejs/awesome-vite) -![GitHub license](https://img.shields.io/github/license/caoxiemeihao/electron-vue-vite?style=flat) -![GitHub stars](https://img.shields.io/github/stars/caoxiemeihao/electron-vue-vite?color=fa6470&style=flat) -![GitHub forks](https://img.shields.io/github/forks/caoxiemeihao/electron-vue-vite?style=flat) +![GitHub license](https://img.shields.io/github/license/caoxiemeihao/electron-vite-vue?style=flat) +![GitHub stars](https://img.shields.io/github/stars/caoxiemeihao/electron-vite-vue?color=fa6470&style=flat) +![GitHub forks](https://img.shields.io/github/forks/caoxiemeihao/electron-vite-vue?style=flat) **[English](README.md) | 简体中文** -🥳 `Electron` + `Vue3` + `Vite2` 整合模板 -- **结构简单，容易上手！** +🥳 Electron + Vite + Vue 整合模板 -- **结构简单，容易上手！** ## 快速开始 - ```bash - # clone the project - git clone https://github.com/caoxiemeihao/electron-vue-vite.git - - # enter the project directory - cd electron-vue-vite - - # install dependency - npm install - - # develop - npm run dev - ``` - ![quick-start](packages/renderer/public/images/quick-start.gif) ## 概述 @@ -63,103 +49,25 @@ ├ ``` -## 依赖放到 dependencies 还是 devDependencies +## 一些常见的案例 -  对待 **Electron-Main、Preload-Script** 时 vite 会以 lib 形式打包 commonjs 格式代码； -如果碰 node 环境的包可以直接放到 dependencies 中，vite 会解析为 require('xxxx')； -electron-builder 打包时候会将 dependencies 中的包打包到 app.asar 里面 +- 在 Main-process 中使用 👉 [electron-vite-boilerplate](https://github.com/caoxiemeihao/electron-vite-boilerplate) -  对待 **Electron-Renderer** 时 vite 会以 ESM 格式解析代码； -像 vue、react 这种前端用的包可以直接被 vite 构建，所以不需要 vue、react 源码； -现实情况 vue、react 放到 dependencies 或 devDependencies 中都可以被正确构建； -但是放到 dependencies 会被 electron-builder 打包到 app.asar 里面导致包体变大； -所以放到 devDependencies 既能被正确构建还可以减小 app.asar 体积，一举两得 +- 在 Renderer-process 中使用 👉 [electron-vite-boilerplate/tree/nodeIntegration](https://github.com/caoxiemeihao/electron-vite-boilerplate/tree/nodeIntegration) -## 渲染进程使用 NodeJs API +**ES Modules** -> 🚧 因为 [electron 安全约束的原因](https://www.electronjs.org/docs/latest/tutorial/security/) Electron 默认不支持在 渲染进程 中使用 NodeJs API。 +- [execa](https://www.npmjs.com/package/execa) +- [node-fetch](https://www.npmjs.com/package/node-fetch) +- [file-type](https://www.npmjs.com/package/file-type) -在渲染进程中使用 NodeJs API 的方式，本模版提供了两种方案： +**Native Addons** -1. 忽视安全约束(**默认**)，位于[main](https://github.com/caoxiemeihao/electron-vue-vite/tree/main) 分支。默认开启了 `nodeIntegration`，开箱即用使用简便:tada:，但是有一定 XSS 攻击风险 🚧。 - -2. 通过 preload 方式向 Render 注入，位于 [withoutNodeIntegration](https://github.com/caoxiemeihao/electron-vue-vite/tree/withoutNodeIntegration) 分支。默认关闭了 `nodeIntegration`，electron 官方推荐的方式，更加安全:lock:。 - -**对于[方案 1](https://github.com/caoxiemeihao/electron-vue-vite/tree/main)，所有的 NodeJs、Electron API 可以直接在 渲染进程 中使用。** - - -**对于[方案 2](https://github.com/caoxiemeihao/electron-vue-vite/tree/withoutNodeIntegration)，所有的 NodeJs、Electron API 通过 `Preload-script` 注入到 渲染进程中** - -您需要创建一个 context bridge，并向渲染进程暴露所需的 API。请注意，如果您的项目使用 typescript，则还需要将类型声明添加到 `Window` interface，例如： - -* **packages/preload/index.ts** - - ```typescript - import fs from 'fs' - import { contextBridge, ipcRenderer } from 'electron' - - // --------- Expose some API to Renderer-process. --------- - contextBridge.exposeInMainWorld('fs', fs) - contextBridge.exposeInMainWorld('ipcRenderer', ipcRenderer) - ``` - -* **packages/renderer/src/global.d.ts** - - ```typescript - // Defined on the window - interface Window { - fs: typeof import('fs') - ipcRenderer: import('electron').IpcRenderer - } - ``` - -* **packages/renderer/src/main.ts** - - ```typescript - // Use Electron, NodeJs API in Renderer-process - console.log('fs', window.fs) - console.log('ipcRenderer', window.ipcRenderer) - ``` - - ```typescript - // Use Electron, NodeJs API in Renderer-process - console.log('fs', window.fs) - console.log('ipcRenderer', window.ipcRenderer) - ``` - -最后，不管是哪种方式，对于第三方 NodeJs API (例如 `sqlite3`) 你还需要在 `packages/renderer/vite.config.ts` 的 `defineConfig.plugins` 中声明它的导入方式，从而让模版能够正确识别它们。关于原理 `resolveElectron` **最好了解下** -👉 这里有个 `issues` [请教一下vite-renderer.config中的resolveElectron函数](https://github.com/caoxiemeihao/electron-vue-vite/issues/52) - -## 在主进程中使用 SerialPort，SQLite3 等 node-native addons - -- 首先，您需要确保这些第三方 node-native addons 被放到了 "dependencies" 中，以二进制文件确保能够被打包。 - -- main 进程和 preload 脚本也需要对应在 vite [build.lib](https://vitejs.dev/config/#build-lib) 中配置打包，需要配置 rollup 选项。 - -**查看更多：** 👉 [packages/main/vite.config.ts](https://github.com/caoxiemeihao/electron-vue-vite/blob/main/packages/main/vite.config.ts) - -```js -export default { - build: { - // built lib for Main-process, Preload-script - lib: { - entry: 'index.ts', - formats: ['cjs'], - fileName: () => '[name].js', - }, - rollupOptions: { - // configuration here - external: [ - 'serialport', - 'sqlite3', - ], - }, - }, -} -``` +- [sqlite3](https://www.npmjs.com/package/sqlite3) +- [serialport](https://www.npmjs.com/package/serialport) ## 运行效果 - + ## 请我喝杯下午茶 🥳