在Electron+Angular 2项目中使用Winston日志工具遇阻求示例

我刚好做过类似的实现，给你一个完整的分步示例，亲测可用：

1. 安装必要依赖 #

首先在项目根目录安装Winston及其TypeScript类型定义：

npm install winston @types/winston --save

2. 主进程（main.ts）配置Winston #

Winston更适合在Electron主进程中运行（避免渲染进程的权限和打包问题），我们先在主进程里配置日志实例，并通过IPC接收渲染进程的日志请求：

import { app, BrowserWindow, ipcMain } from 'electron';
import * as winston from 'winston';
import * as path from 'path';

// 配置Winston日志实例
const logger = winston.createLogger({
  level: 'info', // 默认日志级别，可根据环境调整
  format: winston.format.combine(
    winston.format.timestamp({ format: 'YYYY-MM-DD HH:mm:ss' }),
    winston.format.printf(({ timestamp, level, message }) => {
      return `${timestamp} [${level.toUpperCase()}]: ${message}`;
    })
  ),
  transports: [
    // 输出到文件
    new winston.transports.File({
      filename: path.join(app.getPath('userData'), 'app-logs.log'),
      maxsize: 5 * 1024 * 1024, // 单个日志文件最大5MB
      maxFiles: 3, // 最多保留3个日志文件
      tailable: true
    }),
    // 输出到控制台（开发环境可用）
    new winston.transports.Console({
      format: winston.format.combine(
        winston.format.colorize(),
        winston.format.simple()
      )
    })
  ]
});

// 监听渲染进程的日志请求
ipcMain.on('log-message', (event, level: string, message: string) => {
  switch (level) {
    case 'error':
      logger.error(message);
      break;
    case 'warn':
      logger.warn(message);
      break;
    case 'info':
      logger.info(message);
      break;
    case 'debug':
      logger.debug(message);
      break;
    default:
      logger.info(message);
  }
});

// 其他主进程代码...
let mainWindow: BrowserWindow | null;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // 注意：Angular 2项目可能需要开启这个，或者用contextBridge（更安全）
      contextIsolation: false // 如果用contextBridge的话需要调整，这里为了简化先关闭
    }
  });

  mainWindow.loadURL('http://localhost:4200'); // 开发环境加载Angular服务
  // mainWindow.loadFile('dist/index.html'); // 生产环境加载打包后的文件

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

// 其他生命周期代码...

3. Angular侧创建日志服务 #

在Angular项目中创建一个日志服务，通过Electron的IPC向主进程发送日志消息：

// src/app/services/log.service.ts
import { Injectable } from '@angular/core';

// 获取Electron的ipcRenderer实例
const { ipcRenderer } = (window as any).require('electron');

@Injectable({ providedIn: 'root' })
export class LogService {
  error(message: string) {
    ipcRenderer.send('log-message', 'error', message);
  }

  warn(message: string) {
    ipcRenderer.send('log-message', 'warn', message);
  }

  info(message: string) {
    ipcRenderer.send('log-message', 'info', message);
  }

  debug(message: string) {
    ipcRenderer.send('log-message', 'debug', message);
  }
}

4. 在Angular组件中使用日志服务 #

在任意Angular组件中注入并使用这个日志服务：

// src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
import { LogService } from './services/log.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'electron-angular-winston-demo';

  constructor(private logService: LogService) {}

  ngOnInit() {
    this.logService.info('应用初始化完成');
    this.logService.warn('这是一条警告日志');
    this.logService.error('这是一条错误日志');
    this.logService.debug('这是一条调试日志');
  }
}

关键注意事项 #

• 日志路径：用app.getPath('userData')获取Electron的用户数据目录，避免直接写绝对路径导致的权限问题（不同系统路径不同）。
• TypeScript类型：一定要安装@types/winston，否则会出现类型提示错误。
• Electron安全设置：上面示例中关闭了contextIsolation，生产环境建议用contextBridge暴露IPC方法，提高安全性。比如在主进程中添加：

  // main.ts中BrowserWindow的webPreferences里添加
  webPreferences: {
    nodeIntegration: false,
    contextIsolation: true,
    preload: path.join(__dirname, 'preload.js')
  }
  

  然后创建preload.js：

  // preload.js
  const { contextBridge, ipcRenderer } = require('electron');
  
  contextBridge.exposeInMainWorld('electronAPI', {
    logMessage: (level, message) => ipcRenderer.send('log-message', level, message)
  });
  

  对应的Angular日志服务里改为：

  (window as any).electronAPI.logMessage(level, message);
  

内容的提问来源于stack exchange，提问作者Arik Shaikevitz