如何配置Electron以使用TypeScript的baseUrl选项

我之前也踩过这个坑！TypeScript的baseUrl确实能让导入路径清爽太多，但编译后Node/Electron根本不认这些非相对路径——毕竟它们只遵循自身的模块解析规则。下面是几个靠谱的解决办法：

方法一：用tsconfig-paths自动映射路径 #

这是开发阶段最省心的方案，不用改打包流程就能快速解决问题：

1. 先安装依赖：

npm install tsconfig-paths --save-dev

2. 在Electron主进程入口文件（比如main.ts）最顶部添加这段代码，让Node启动时先处理路径映射：

import { join } from 'path';
import { config } from 'tsconfig-paths';

// 根据你的项目结构调整tsconfig和baseUrl的路径
const tsConfigPath = join(__dirname, '../tsconfig.json');
const baseUrl = join(__dirname, '../');

config({
  baseUrl,
  paths: require(tsConfigPath).compilerOptions.paths
});

如果你的主进程是编译后的CommonJS格式JS文件，代码要改成这样：

const { join } = require('path');
const { config } = require('tsconfig-paths');

const tsConfigPath = join(__dirname, '../tsconfig.json');
const baseUrl = join(__dirname, '../');

config({
  baseUrl,
  paths: require(tsConfigPath).compilerOptions.paths
});

这样启动Electron时，它就能正确解析util/Command这类路径了。

方法二：用打包工具转成相对路径 #

如果是生产环境，更推荐用Webpack、Vite或Rollup这类工具打包——它们会在构建过程中自动把非相对路径转换成Node能识别的相对路径：

以Webpack为例，你可以用tsconfig-paths-webpack-plugin插件读取tsconfig.json的路径配置：

1. 安装插件：

npm install tsconfig-paths-webpack-plugin --save-dev

2. 在webpack.config.js里配置：

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  // 其他打包配置...
  resolve: {
    plugins: [new TsconfigPathsPlugin()]
  }
};

打包完成后，所有非相对路径都会被替换成相对路径，Electron运行时就不会出现模块找不到的错误了。

方法三：手动配置Node的模块搜索路径 #

这个方法比较原始，适合不想加额外依赖的场景，但只能处理baseUrl本身，没法解决paths别名的问题：

在主进程启动时，把baseUrl对应的目录添加到Node的模块搜索路径里：

import { join } from 'path';

// 假设你的baseUrl指向项目根目录下的src文件夹
const srcPath = join(__dirname, '../src');
module.paths.push(srcPath);

总结一下：开发阶段用tsconfig-paths最省心，生产环境用打包工具处理更稳妥。

内容的提问来源于stack exchange，提问作者Erik J