create-electron | 1分钟快速搭建一个完善的Electron项目

·  阅读 266
create-electron | 1分钟快速搭建一个完善的Electron项目

前言

大家好,我是 Alex 。从事 Electron 相关开发工作已经有5年了。对于 Electron 初学者,通常通过 clone 其官方示例项目或者 Fiddle 来学习。但一到深入开发应用时,就会遇到一系列的问题:

  • 如何搭配现代前端框架(vue,react, ……)
  • 是否TypeScript
  • 如何构建编译,选择什么编译工具(vite,parcel,……)
  • 如何快速调试
  • 如何安装原生模块
  • 如何打包应用程序(electron-builder, electron-forge)
  • 如何签名公证
  • 如何部署,实现自动升级
  • ……

create-electron

create-electron 是通过借鉴 create-vitecreate-vue 等新一代脚手架的思路应运而生。旨在帮助开发者快速搭建 Electron 项目,提高开发体验和效率。

上述提到的一系列问题,通过 create-electron 都能有效地解决,不再需要clone各种社区模板了。

搭建项目

兼容性注意: create-electron 需要 Node.js 版本 >= 14.0.0。当你的包管理器发出警告时,请注意升级你的 Node 版本。

使用 npm:

$ npm create @quick-start/electron
复制代码

使用 Yarn:

$ yarn create @quick-start/electron
复制代码

使用 pnpm:

$ pnpm create @quick-start/electron
复制代码

然后按照提示操作即可!

create-electron.gif

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如,要构建一个 Electron + Vue3 项目,运行:

# 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
复制代码

当前支持的预置模板:

  • sample
  • sample-ts
  • vue
  • vue-ts
  • react
  • react-ts
  • svelte
  • svelte-ts

功能特征

  • 使用 ESLint + Prettier 更好的代码风格和质量检查,帮助你编写高质量的代码
  • 使用 electron-vite,一个与 Vite 集成非常快的构建工具,你无需关心配置。
  • 使用 electron-toolkit 工具包帮助你更好的开发,例如:TSconfigs 扩展;在预加载脚本中向渲染进程公开常见的 Electron API;为主进程提供有效的实用API。
  • 使用 electron-builder 并预设打包配置,让你轻松打包 Electron 应用。
  • 使用 electron-updater 进行自动更新,基于 electron-builder。

screenshot.png

结语

项目现在已经开源,欢迎各位感兴趣的小伙伴参与贡献提交 PR 或反馈 issue,给予 star 支持。

github.com/alex8088/qu…

分类:
开发工具
标签:
收藏成功!
已添加到「」, 点击更改