如何2分钟把你的前端项目（web）变成一个客户端软件（electron）

一个命令行来快速生成能够正常运行和打包的 electron 的最低配置。支持 ant-design-pro、crate-react-app、vue。

前言

最近做了一个客户端软件，为了方便后面再做类似的项目，就开发了一个命令行来快速生成能够正常运行和打包的 electron 的最低配置。

为什么不使用脚手架？比如官方推荐例子 electron-react-boilerplate。

新脚手架有学习成本，还需要重新考虑 UI 库、数据管理、路由权限等。我的需求是把现有的 web 项目转换成能够使用的 electron 项目。把想法快速落地成客户端软件。

功能演示

目前支持的转换的脚手架有 ant-design-pro、create-react-app、vue。如果需要扩展支持欢迎评论、提 issues、pr。项目地址

准备

全局安装 auto-command：用于生成 ant-design-pro、create-react-app、vue 项目 electron 的最小配置。

1	$ npm i auto-command -g

ant-design-pro

全局安装@ant-design/pro-cli：用于生成一个基于 ant-design-pro 的 web 项目

1	$ npm i @ant-design/pro-cli -g

下面的命令可以参照和 gif 图中执行的一样，建议搭配食用。

$ pro create my-app-pro #初始化项目
$ cd my-app-pro #进入项目目录
$ ac #使用命令生成最小electron配置环境
$ pnpm i #装包
$ npm run ele:devAll #通过electron运行项目
$ npm run ele:buildAll #通过electron打包项目（windows和mac版本）

演示图总耗时：119 秒

create-react-app

下面的命令可以参照和 gif 图中执行的一样，建议搭配食用。

$ npx create-react-app my-app #初始化项目
$ cd my-app #进入项目目录
$ ac #使用命令生成最小electron配置环境
$ rm -rf node_modules # 删除node_modules目录（因为我要用pnpm装包所以删除了依赖）
$ pnpm i #装包
$ npm run ele:devAll #通过electron运行项目
$ npm run ele:buildAll #通过electron打包项目（windows和mac版本）

演示图总耗时：103 秒

vue

全局安装@vue/cli：用于生成一个基于 vue 的 web 项目。

1	$ npm i -g @vue/cli

下面的命令可以参照和 gif 图中执行的一样，建议搭配食用。

$ vue create real-world-vue #初始化项目
$ cd real-world-vue #进入项目目录
$ ac #使用命令生成最小electron配置环境
$ pnpm i #装包
$ npm run ele:devAll #通过electron运行项目
$ npm run ele:buildAll #通过electron打包项目（windows和mac版本）

演示图总耗时：96 秒

源码解析

源码地址

electron 的最小配置分析

electron 的最小配置需要新增 main.js 文件（入口文件）、新增.npmrc 文件（解决网络问题）、修改 package.json 文件（配置打包和运行时）、项目文件（主要修改相对路径的打包）。

怎么做

开发这个工具 codemod 类似。总的来说就是做了两个事情，新文件生成、老文件修改后生成。

新文件（main.js、.npmrc）生成使用 mustache 生成模板文件，可以设置变量根据类型的不同生成不同的模板。

老文件（package.json、其他配置文件）修改后生成主要是 ast 相关操作：@babel/core、@babel/traverse、@babel/generator、@babel/types。

最后对输出的字符串格式化（prettier），使用 fs-extra 进行文件读取写入工作

FAQ

生成 electron 配置失败

使用git clone https://github.com/txp1035/electron-example来进行初始化项目。

结语

最后，欢迎提需求、提 pr。如果你也对效能提升感兴趣欢迎联系我一起交流。