我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！
前言
最近做了一个客户端软件，为了方便后面再做类似的项目，就开发了一个命令行来快速生成能够正常运行和打包的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的最小配置。
$ npm i auto-command -g
ant-design-pro
全局安装@ant-design/pro-cli：用于生成一个基于ant-design-pro的web项目
$ 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项目。
$ 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。如果你也对效能提升感兴趣欢迎联系我一起交流。
如果这篇文章的对你有帮助我很高兴，你的每一个点赞、收藏和关注都是我创作的动力、