TS项目打包成windows可执行文件exe

近日看到很多有意思的开源项目，比如此次的项目MusicFree。MusciFree官网，GitHub源代码（PC端）。

由于本人是后端开发，打包TS项目为exe文件不是很熟悉，遂写下本篇博客记录一下TypeScript项目的打包方法。

1.首先安装node.js和npm包管理器

node.js安装方法参照其他博客，在此就不过多赘述。node安装完成后，打开cmd，输入npm install -g，全局安装npm。

npm install -g

 查看是否安装成功

#查看node和npm的版本
node -v 
npm -v

见到如下，则说明安装成功。

2.安装和配置 Electron

在项目文件夹下打开cmd命令，输入npm install electron --save-dev安装Electron

npm install electron --save-dev

 然后配置项目中的package.json文件，配置打包的方法。（一般来说项目作者已经配置好了，选择对应的打包方式即可）

3.编译 TypeScript 为 JavaScript 

由于项目是由TS开发的，所以打包前要先把TS代码编译成JS。

在项目文件夹下，安装TypeScript：npm install --save-dev typescript

npm install --save-dev typescript

配置tsconfig.json文件（一般由作者配置好）

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "target": "ES2021",
    "allowJs": true,
    "module": "commonjs",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "noImplicitAny": true,
    "sourceMap": true,
    "baseUrl": ".",
    "outDir": "dist",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "paths": {
      "*": ["node_modules/*"],
      "@/*": ["src/*"],
      "@main/*": ["src/main/*"],
      "@native/*": ["src/main/native_modules/*"],
      "@renderer/*": ["src/renderer/*"],
      "@renderer-lrc/*": ["src/renderer-lrc/*"]
    }
  },
  "include": ["src/**/*"]
}

输入tsc，进行编译

tsc

5.打包

输入npm run package进行打包

npm run package

6.测试运行

打包完成之后，在输出目录找到exe文件，测试运行，成功。