《1. 基于 Vite 重新构建 Electron(王佳旺).pdf》由会员分享,可在线阅读,更多相关《1. 基于 Vite 重新构建 Electron(王佳旺).pdf(37页珍藏版)》请在三个皮匠报告上搜索。
1、基于 Vite 重新构建 ElectronNew Electron Forge with Vite王佳旺Electron 成员 Forge 维护者ElectronVite 组织创建者OpenJS Speaker(2023)哈啰 资深前端程师Electron 与 ForgeElectronViteElectron 中国演讲内容 Speech content1Electron 与 Forge使用 JavaScript、HTML 和CSS 构建跨平台桌面应用程序 什么是 ElectronWhat is Electron钉钉DiscordWordpress DesktopitchPostmanGith
2、ub DesktopPolypaneFigmaSlackVScode书QQ Mac声 FlatSkypeTwitchIntelliBarForge 是一款用于打包和分发 Electron 应用程序的一体化工具 什么是 ForgeWhat is ForgeElectron Forge1.使用 npm init?2.基于第三方脚手架创建?3.去 Github 上 clone 一个模板?如何创建一个 Electroon 项目How to create an Electron project通过 npm 创建项目Create project via npmnpm init安装 electron编写主进
3、程代码编写渲染进程代码编写预加载脚本配置启动命令不支持 ESNext 语法与 ESModule不支持 TypeScript不支持 Electron 主进程快速重启不支持 Electron 渲染进程、预加载脚本自动刷新配置繁琐开发体验差使用 npm 的一些问题Problems with npm通过第三方脚手架创建项目Create project via third-party scaffoldingCLI create安装 electron编写主进程代码通过 CLI 生成渲染进程代码编写预加载脚本配置启动命令create-react-appcreate-vue不完全 支持 ESNext 语法与
4、ESModule不完全 支持 TypeScript不支持 Electron 主进程快速重启不完全 Electron 支持渲染进程、预加载脚本自动刷新配置繁琐开发体验差使用第三方脚手架的一些问题Problems with third-party scaffolding去 Github 上 clone 一个模板Clone a Github templateelectron boilerplateelectron sampleelectron template具有很强的作者偏好更新不稳定文档不健全使用模板的一些问题Problems with Github samples提供最佳实践方案模板支持 ES
5、Next 语法与 ESModule支持 TypeScript 语法支持 Electron 主进程快速重启支持 Electron 渲染进程、预加载脚本自动刷新 集成完整的打包配置我们需要怎样的一个工具What kind of tool do we need使用 Forge 创建一个 Electron 项目Create an Electron project using Forge生成模板代码、自动安装依赖npm start提供了最佳实践样板代码支持 ESNext、TypeScript 语法与 ESModule支持 Rebuild C/C+扩展支持 Electron 主进程快速重启支持 Elect
6、ron 渲染进程、预加载脚本自动刷新集成构建 Mac、Linux、Windows 配置Froge 给我们带来了什么What does Forge bring to us常友好的 DXForge 架构图Forge architecture diagramCLIPublisherselectron-rebuildPluginsHooksMakerselectron-packagerWebpack/Viteforge.config.jsJS/TS TemplateBuild identifiersUser sideConfigCore FeaturesForgeJoin Electron orgFo
7、rge 的重要版本Forge important versionsVite TS templateSupport Vitev6.0.02022.11v6.1.0v6.4.02022.112022.112ElectronVite什么是 Vite 下代的前端具链,为开发提供极速响应。Vite 简介Vite 的一些特点 强依赖 ES 模块(ESModule)单件转换(Not Bundle)依赖预构建(Dependency Pre-Bundling)Introduction to Vite更快的启动速度更快的渲染进程 HMR更简单、开放的项目配置(更符合 Vite 用户习惯)Vite 给 Forge
8、带来了什么What does Vite bring to ForgeVite 给 Electron 带来了什么What does Vite bring to Electron使用 ElectronVite 创建一个 Electron 项目Create an Electron project using ElectronViteVue/React/Vanilla 模板npm run devVite 构建 Electron 主进程Vite 构建 Electron 渲染进程预加载脚本Vite 构建 Electron 渲染进程Vite 如何构建 ElectronHow Vite Builds Elec
9、tronVite(Node.js environment)Electron environment你不知道的 ElectronYou dont known Electron只是一个 Electron 的可执行程序的路径Vite 构建主进程与预加载脚本Vite build Main process and Preload scripts 只需要排除 Electron 内置模块渲染进程的特性Renderer process characteristicsDOM APIBOM APINode.js APIC/C+addons加载第三方 npm 包加载 Electron 内置模块加载 C/C+扩展Vi
10、te 构建渲染进程Vite build Renderer processVite 加载第三方 npm 包Load third-party npm-pkgA Node.js npm-pkgPolyfill Node.js APIPre-BundlingPolyfill Browser APIPre-BundlingA Web npm-pkgElectron 特有的预构建Electron-specific Pre-BundlingA Node.js npm-pkgPre-BundlingPolyfill interope file Bundle with esbuild as Node.js fo
11、rmatVite 加载内置模块Load built-in modulesimport ipcRenderer from electronHttp request by Renderer processVite dev serverHttp response to Renderer processRequest interceptionResponse polyfillAn polyfill Renderer process module Vite 加载 C/C+扩展Load C/C+addonsExport using ESModuleModule interopImport using Co
12、mmonJSVite 插件架构图Vite plugin architecture diagramBuild as CJS formatvite serve(Renderer)External build-in modulesLoad third-party npm-pkgLoad built-in modulesLoad C/C+addonsvite build(Main,Preload)vite-plugin-electronvite-plugin-electron-rendererVite plugin hooks Forge 热重启,热刷新完善 更好的 C/C+扩展支持 构建包体大小优化 主进程和预加载脚本 Not Bundle 方案探索(实验中 patak 很赞同)下一步计划Next plan3Electron 中国加入 Electron 中国Join Electron China2021Electron ChinaElectron EcosystemLeo Wang(草鞋没号)Head of Electron China Black-Hole20232021感谢参与THANKSElectron Forgehps:/