工程&研发 - 2 - 王佳旺 - 基于 Vite 重新构建 Electron.pdf

《工程&研发 - 2 - 王佳旺 - 基于 Vite 重新构建 Electron.pdf》由会员分享，可在线阅读，更多相关《工程&研发 - 2 - 王佳旺 - 基于 Vite 重新构建 Electron.pdf（38页珍藏版）》请在三个皮匠报告上搜索。

1、王佳旺Electron 成员 ElectronVite 创建者 Vite 社区态维护者 哈啰 资深前端程师基于 Vite 重新构建 Electron演讲内容 Electron 简介与使 Vite 构建 Electron 应与预构建机制ElectronVite 使及实现什么是 Electron钉钉声 FlatQQ MacIntelliBarPostmanVSCodePolypaneSkypeFigmaSlackDiscordGitHub Desktop书itchTwitchWordpress Desktop使 JavaScript、HTML 和 CSS 构建跨平台桌应程序ElectronVite

2、Electron Quick startElectron如何创建个 Electron 应通过 npm init 创建？通过主流脚架创建？去 Github 上 Clone 个模板？ElectronVite通过 npm init 创建ElectronVite安装 electron编写主进程代码编写渲染进程代码配置启动命令编写预加载脚本代码npm initElectron 样板代码ElectronVite主进程(Hot Restart)渲染进程(HMR)预加载脚本(Hot Reload)使 npm init 创建项的问题ElectronVite不持 ESNext、TypeScript 修改代码不持热

3、重启、热重载、HMR 启动配置、构建配置繁琐 开发调试效率低、体验差 其他通过主流脚架创建ElectronVitecreate-vuecreate-react-app安装 electron编写主进程代码配置启动命令编写预加载脚本代码CLI create通过 CLI 成 渲染进程代码 需要次改造使主流脚架的些问题ElectronVite不完全持 ESNext、TypeScript 修改代码不持热重启、热重载、HMR 启动配置、构建配置繁琐、改造成本 开发调试效率低、体验差 其他去 Github 上 Clone 个模板ElectronViteelectron boilerplateelectron

4、 templateelectron sample使 Github 模板的些问题ElectronVite具有很强的作者偏好(Opinionated)更新不稳定 档不健全 我们需要怎样的个具ElectronVite快速初始化开箱即的最佳实践程样板 持 ESNext、TypeScript 修改主进程热重启(Restart)修改预加载脚本热重载(Reload)修改渲染进程触发 HMR 集成完整的打包配置 ElectronViteElectronVitenpm create vitelatest my-electron-vite-project?Select a framework:-Use arrow

5、-keys.Return to submit.Vanilla Vue React Preact Lit Svelte Others?Select a variant:-Use arrow-keys.Return to submit.create-vite-extra create-electron-vite?Project template:-Use arrow-keys.Return to submit.Vue React Vanillacd my-electron-vite-project npm install npm run devElectronVite使 ElectronVite

6、创建项ElectronVitenpm run devVue/React/Vanilla 模板 基于 Vite 官模板ElectronViteVite 如何构建 Electron 应Vite 构建 Electron 主进程 Vite 构建 Electron 渲染进程预加载脚本 Vite 构建 Electron 渲染进程 ElectronVite热重启(主进程)热重载(预加载脚本)你不知道的 Electron 模块只是个 Electron 可执程序的路径ElectronViteElectron environmentVite(Node.js environment)Vite 构建 Electron