关于前端:electronvite新一代-Electron-开发利器带你轻松玩转-Electron

electron-vite 是一个新型 Electron 开发构建工具，旨在为 Electron 提供更快、更精简的开发体验。

得益于 Vite 卓越的前端开发体验，越来越多的 Electron 我的项目也开始利用它来构建开发。翻阅各种社区资源能够发现很多基于 Vite 搭建的 Electron 开发模板，但都存在着一些独特的问题：

配置绝对简单，繁琐
须要辅助脚本来配合编译开发
无奈触类旁通，自主抉择前端框架（Vue、React 和 Svelte 等）

electron-vite 旨在解决这些问题，为 Electron 提供更快、更精简的开发体验。

要解决这些问题，咱们须要先理解 Electron。Electron 是一个基于 Chromium 和 Node.js 构建跨平台桌面应用程序的框架，这意味着打包工具须要同时解决 Node.js 和浏览器两种环境。

Vite 有能力同时解决这两种环境。electron-vite 在运行时会间接打包主过程和预加载脚本源码，然而对于渲染器来说，会启动一个 dev server 来应用 Vite 的 HMR，这将极大地提高 Electron 的开发效率。

很多开发者和社区模板，都会通过开启 node 集成（nodeIntegration）和敞开上下文隔离（contentIsolation）的形式来开发。只管这能够取得一点点的开发效率，但不应该被举荐，这是很不平安的做法。在 Electron 中，不仅仅是浏览器，它还提供很多弱小的原生能力，如文件系统拜访，shell 等。事实上，最风行的 Electron 应用程序（slack、visual studio code 等）都不会这样做。

所以，electron-vite 的设计思路也会遵循这一点，包含举荐的我的项目构造、内置配置等。

electron-vite 是一个新型构建工具，旨在为 Electron 提供更快、更精简的开发体验。它次要由三局部组成：

一套构建指令，它应用 Vite 打包你的代码，并且它可能解决 Electron 的独特环境，包含 Node.js 和浏览器环境。
集中配置主过程、渲染器和预加载脚本的 Vite 配置，并针对 Electron 的独特环境进行预配置。
为渲染器提供疾速热重载（HMR），极大地提高了开发效率。

electron-vite 疾速、简略且易学易用，旨在开箱即用。

以下是 electron-vite dev 的运行原理图：

npm i electron-vite -D

在装置了 electron-vite 的我的项目中，你能够间接应用 npx electron-vite 运行，也能够在 package.json 文件中增加 npm scripts：

{
  "scripts": {
    "start": "electron-vite preview", // 开启 Electron 程序预览生产构建
    "dev": "electron-vite dev", // 开启开发服务和 Electron 程序
    "prebuild": "electron-vite build" // 为生产构建代码
  }
}

当以命令行形式运行 electron-vite 时，electron-vite 将会主动尝试解析我的项目根目录下名为 electron.vite.config.js 的配置文件。最根本的配置文件如下所示：

// electron.vite.config.js
export default {
  main: {// vite config options},
  preload: {// vite config options},
  renderer: {// vite config options}
}

注：对于一个简略的 Electron 我的项目而言，上述的配置就根本能够满足需要了，因为 electron-vite 内置很多针对 Electron 开发的配置，极大的加重开发者配置心智累赘。

当应用 electron-vite 打包代码时，Electron 应用程序的入口点应更改为输入目录中的主过程入口文件。默认的输入目录 outDir 为 out。你的 package.json 文件会是这样：

{
  "name": "electron-app",
  "version": "1.0.0",
  "main": "./out/main/index.js",
}

Electron 的工作目录将是输入目录，而不是你的源代码目录。因而在打包 Electron 应用程序时能够将源代码排除。

为了在渲染器中应用模块热替换（HMR）性能，须要应用 环境变量 来确定窗口浏览器是加载本地 html 文件还是本地 URL。

function createWindow() {
  // Create the browser window
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {preload: path.join(__dirname, '../preload/index.js')
    }
  })

  // Load the local URL for development or the local
  // html file for production
  if (!app.isPackaged && process.env['ELECTRON_RENDERER_URL']) {mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
  } else {mainWindow.loadFile(path.join(__dirname, '../renderer/index.html'))
  }
}

热重载是指在主过程或预加载脚本模块发生变化时疾速从新构建并重启 Electron 程序。事实上，并不是真正的热重载，而是相似的。它为开发者带来了很好的开发体验。

有两种启用形式：

应用 CLI 选项 -w 或 --watch，例如 electron-vite dev --watch。这是首选形式，它更加灵便。
应用配置项 build.watch 并设为 {}。此外，还能够配置更多的 watcher 选项，见 WatcherOptions。

应用 electron-vite 状况下，调试 Electron 是极其简略的事件。

增加文件 .vscode/launch.json，配置内容为：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite",
      "windows": {"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite.cmd"
      },
      "runtimeArgs": ["--sourcemap"]
    }
  ]
}

而后，在 main.ts（源代码）中设置一些断点，并在 VSCode 调试视图 中开始调试。

注：--sourcemap 为 electron-vite CLI 选项，通过此选项生成源代码 source map 文件来反对调试。

应用 NPM

npm create @quick-start/electron

应用 Yarn

yarn create @quick-start/electron

应用 PNPM

pnpm create @quick-start/electron

而后依照提醒操作即可!

✔ Project name: … <electron-app>
✔ Select a framework: › vue
✔ Add TypeScript? … No / Yes
✔ Add Electron updater plugin? … No / Yes
✔ Enable Electron download mirror proxy? … No / Yes

Scaffolding project in ./<electron-app>...
Done.

你还能够通过附加的命令行选项间接指定项目名称和你想要应用的模板。例如，要构建一个 Electron + Vue 我的项目，运行:

# npm 6.x
npm create @quick-start/electron my-app --template vue

# npm 7+, extra double-dash is needed:
npm create @quick-start/electron my-app -- --template vue

# yarn
yarn create @quick-start/electron my-app --template vue

# pnpm
pnpm create @quick-start/electron my-app --template vue

目前反对的模板预设如下：

JavaScript	TypeScript
vanilla	vanilla-ts
vue	vue-ts
react	react-ts
svelte	svelte-ts

理解更多无关 create-electron 的信息。

须要特地指出的是 create-electron 减少了 pnpm 反对和中国区 Electron 下载问题的配置选项，来改善开发者的体验。

你能够通过以下链接理解更多对于 electron-vite 的信息：

官网文档：https://evite.netlify.app/

GitHub：https://github.com/alex8088/e…

关于前端:electronvite新一代-Electron-开发利器带你轻松玩转-Electron

设计初衷

事实问题

Electron 个性

最佳实际

理解 electron-vite

如何应用

装置

命令行界面

配置 electron-vite

Electron 入口

在渲染过程中应用 HMR

热重载

应用 VSCode 调试

疾速搭建一个 electron-vite 我的项目

结语