【工具使用】React+Vite+TypeScript项目打包成exe(基于electron)

前言

• 最近利用react+vite+ts创建了一个前端项目，希望能够打包成exe进行分发，浏览了几个csdn教程，参照进行打包的过程并不是很顺利，这里分享自己的解决方法。
• 项目创建过程：直接使用npm创建，语言选择了typescript

  npm create vite@latest

简明版教程以及优点

• 利用electron的开源项目，把自己的dist文件夹放入其中
• 修改main.js
• 优点：成功率高，适配typescript语言，不用修改自己原始项目中的任何东西，不用担心因为打包导致原有代码跑不了

打包过程

当完成项目后，保留目录中的所有配置不变，包括package.json, tsconfig.json等，就使用生成项目时候默认的配置，直接在命令行运行：

npm run build

参照package.json中的配置，build命令实际执行的是tsc编译（将ts转换为js）以及vite build:

// package.json
"scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },

执行完成后出现dist文件夹，内容展示如下：

然后，重点来了！不要自己在根目录底下添加main.ts或者main.js，这样很容易因为ts和js一些配置冲突导致打包不成功，我尝试的方法是：

1. 去github上克隆electron的开源项目，这是一个小型的electron app
2. 按照仓库readme的内容先下载node_modules
3. 将以上生成的dist文件夹放入根目录中
4. 将根目录中原有的main.js中的下述语句进行替换：

   // 原始代码
   mainWindow.loadFile('index.html')
   // 替换为
   mainWindow.loadFile('./dist/index.html')

5. 先运行

   npm run start

   看看是否正常出现electron窗口，是的话说明路径等已经调整正确

6. 安装electron-forge，这里直接参考官方文档中给出的命令：

   npm install --save-dev @electron-forge/cli
   npx electron-forge import

7. 以上命令会自动修改package.json文件并添加相关的依赖
8. 最后运行

   npm run make

   打包后的应用程序存储在out/make文件夹中，同时包含有配套的配置文件，至此，打包完成!

最后将自己的项目做一个小小的分享，这是一个对图算法进行可视化的项目，同时含有对于上海市地铁线路图的可视化，支持路径查询，项目github仓库地址，欢迎在原有项目基础上进行合适的修改！