如何将package.json中的版本号传入Electron应用？（TypeScript编译配置可行吗？）

你遇到的问题非常典型——本地开发时用process.env.npm_package_version能拿到版本，但Electron打包后这个环境变量就消失了，直接导入package.json又担心它没被包含进构建产物。其实不用把问题想复杂，你完全可以实现类似Vite的define变量注入效果，甚至有更简单的方案，下面给你几个靠谱的解决思路：

方案一：编译前自动生成版本文件（最稳妥，推荐） #

这个方案不需要折腾TS的复杂配置，核心是在TypeScript编译前，先把版本号写入一个TS文件，让编译后的产物自动包含这个版本信息：

1. 写一个生成版本文件的小脚本
   新建scripts/generate-version.js文件，内容如下：

   const fs = require('fs');
   const path = require('path');
   const packageJson = require('../package.json');
   
   // 生成包含版本号的TS代码
   const versionCode = `export const APP_VERSION = '${packageJson.version}';
   `;
   
   // 写入到src目录下，方便代码导入
   fs.writeFileSync(path.join(__dirname, '../src/version.ts'), versionCode);
   

2. 修改package.json的构建脚本
   利用npm的pre钩子脚本，让它在npm run build自动执行上面的版本生成脚本：

   "scripts": {
     "prebuild": "node scripts/generate-version.js",
     "build": "tsc",
     "electron:build": "electron-builder --win"
   }
   

   （npm会自动在执行build前先跑prebuild脚本，不用手动调用）

3. 在代码中直接使用版本号
   现在可以在Electron的主进程/渲染进程代码里直接导入使用了：

   import { APP_VERSION } from './version';
   
   // 比如在渲染进程中显示版本
   console.log(`当前应用版本：v${APP_VERSION}`);
   

这个方案的好处是简单可靠，生成的version.ts会被TS正常编译，Electron打包时一定会包含它，完全不用担心版本号丢失。

方案二：用TS自定义转换器实现类似Vite的define注入 #

如果你确实想实现和Vite一样的编译时变量替换效果，可以借助ts-transform-define这个工具，让TS在编译阶段把全局变量替换成实际的版本号：

1. 安装依赖

   npm install ts-transform-define ttypescript --save-dev
   

   • ts-transform-define负责实现变量替换逻辑
   • ttypescript是一个扩展TSC的工具，允许我们使用自定义转换器

2. 修改tsconfig.json配置
   在compilerOptions中添加插件配置，直接注入版本号：

   {
     "compilerOptions": {
       // 你的原有TS配置
       "plugins": [
         {
           "transform": "ts-transform-define",
           "defines": {
             "APP_VERSION": "${npm_package_version}"
           }
         }
       ]
     }
   }
   

3. 声明全局变量避免TS报错
   新建src/global.d.ts文件，声明全局变量：

   declare const APP_VERSION: string;
   

4. 修改build脚本用ttypescript编译

   "scripts": {
     "build": "ttsc"
   }
   

5. 代码中直接使用APP_VERSION
   现在你可以在任何TS文件里直接写console.log(APP_VERSION)，编译后会被替换成实际的版本号字符串。

方案三：直接导入package.json（简单但有小缺点） #

其实Electron打包时是可以包含package.json的，只要你配置正确：

1. 修改tsconfig.json允许导入JSON

   {
     "compilerOptions": {
       "resolveJsonModule": true,
       "esModuleInterop": true
     }
   }
   

2. 配置electron-builder包含package.json
   在electron-builder.json（或package.json的build字段）中添加：

   "files": [
     "dist/**/*",
     "package.json"
   ]
   

3. 代码中导入版本号

   import packageJson from '../package.json';
   console.log(`版本号：${packageJson.version}`);
   

这个方案的唯一缺点是，package.json会被完整打包到应用中，可能会暴露一些你不想公开的字段（比如devDependencies、scripts等），如果介意的话，还是用前两个方案更合适。

总结 #

不用把问题复杂化，方案一（自动生成版本文件） 是最推荐的——配置简单、维护成本低，而且完全没有兼容性问题。方案二适合追求和Vite一致开发体验的场景，方案三则是最直接的快速方案，根据你的需求选择即可。

备注：内容来源于stack exchange，提问作者Fla