如何在 Electron 项目中使用 NestJS

背景

本人正在开发一个开源的项目------pear-rec，pear-rec是一个跨平台软件，它使用Electron作为跨平台框架，并且实现了前后端分离的架构。前端使用ReactJS，并使用Ant Design作为主要的UI框架，后端使用ExpressJS+typeorm+sqljs来实现业务逻辑，但是在使用中发现ExpressJS 很多业务需要自己摸索找文档，效率不行，所以我思索再三后，觉得要将后台升级为 NestJS。

介绍

nestjs

一个先进的 Node.js 框架，用于构建高效、可靠和可扩展的服务器端应用程序。

网站： nestjs.com/

electronjs

在本文章将会用到 electronjs 的 utilityProcess 这个类，来实现内部调用 nestjs 服务。

utilityProcess

utilityProcess 使用 Node.js 和 Message 端口创建了一个子进程。它提供一个相当于 Node.js 的 child_process.fork API，但使用 Chromium 的 Services API 代替来执行子进程。

操作

下面是一系列步骤，以帮助你在Electron项目中集成NestJS。

1. 创建一个新的NestJS项目

首先，我们需要在你的Electron项目中创建一个新的NestJS项目。你可以使用Nest CLI（命令行界面）工具快速创建一个新的NestJS项目。运行以下命令：

java 复制代码

npm install -g @nestjs/cli
nest new my-server-app

这将为你创建一个新的NestJS项目，并将其安装到my-server-app目录中。

2. 配置NestJS项目

进入my-server-app目录，并打开package.json文件。在scripts部分添加以下命令：

json 复制代码

"scripts": {
  ...
  "build": "nest build --webpack --webpackPath=./webpack.config.js",
  "webpack": "nest build",
  ...
}

3. 修改打包配置

进入my-server-app目录，并新建webpack.config.js文件。在webpack.config.js文件中写下如下代码：

js 复制代码

/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path');
const webpack = require('webpack');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './src/main',
  target: 'node',
  // 置为空即可忽略webpack-node-externals插件
  externals: {},
  module: {
    noParse: /sql.js/,
    rules: [
      {
        test: /\.ts?$/,
        use: {
          loader: 'ts-loader',
          options: { transpileOnly: true },
        },
        exclude: /node_modules/,
      },
    ],
  },
  // 打包后的文件名称以及位置
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    extensions: ['.js', '.ts', '.json'],
  },
  plugins: [
    // 需要进行忽略的插件
    new webpack.IgnorePlugin({
      checkResource(resource) {
        const lazyImports = [
          '@fastify/static',
          '@nestjs/microservices',
          '@nestjs/microservices/microservices-module',
          '@nestjs/websockets/socket-module',
          'cache-manager',
          'class-validator',
          'class-transformer'
        ];
        if (!lazyImports.includes(resource)) {
          return false;
        }
        try {
          require.resolve(resource, {
            paths: [process.cwd()],
          });
        } catch (err) {
          return true;
        }
        return false;
      },
    }),
    new ForkTsCheckerWebpackPlugin(),
    new CopyPlugin({
      patterns: [{
         from: './node_modules/sql.js/dist/sql-wasm.wasm'
     }]
  }),
  ],
};

结果就是讲 nestjs 项目打包成一个 js 文件。

具体的可以参考文章：

Nest项目部署的最佳方式

Nest系列（八）一路坎坷，我实现了最简便的方式打包部署nestjs+prisma应用

4. 执行命令得到文件

首先你要通过npm install安装了NestJS项目的依赖项。然后npm run build打包NestJS项目，并在dist文件夹下发现main.js文件。

5. 在 electron 项目中创建子进程

进入自己的electron项目的目录，并新建serverProcess.ts文件。在serverProcess.ts文件中写下如下代码：

js 复制代码

import { type UtilityProcess, utilityProcess } from 'electron';
import { url, serverPath } from './contract';

let serverProcess: null | UtilityProcess = null;

export function initServerProcess() {
  serverProcess =
    url ||
    utilityProcess.fork(serverPath, [], {
      stdio: 'pipe',
    });

  serverProcess.on?.('spawn', () => {
    serverProcess.stdout?.on('data', (data) => {
      console.log(`serverProcess output: ${data}`);
    });
    serverProcess.stderr?.on('data', (data) => {
      console.error(`serverProcess err: ${data}`);
    });
  });
}

export function quitServerProcess() {
  url || serverProcess?.kill();
}

这将创建一个新的子进程，并在其中运行NestJS服务。你可以根据需要处理NestJS服务进程的输出。请确保在启动Electron应用程序之前，将你已经打包好的main.js文件，放到electron项目中，并用serverPath指向文件位置。

6. 使用Electron调用NestJS服务

现在，我们可以在Electron的渲染进程中使用axios或其他HTTP客户端来调用NestJS服务。你可以在Electron的任何Vue或React组件中调用NestJS服务的API。

javascript 复制代码

import axios from 'axios';

const fetchData = async () => {
  try {
    const response = await axios.get('http://localhost:3000/api/data');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
};

这将向NestJS服务的/api/data端点发送GET请求，并在控制台打印响应数据。

到此为止，你已经成功地在Electron项目中集成了NestJS服务。你可以使用NestJS强大的功能，如路由、中间件和拦截器，来构建可伸缩的桌面应用程序。

总结

Electron和NestJS是两种功能强大的工具，它们的集成可以帮助开发者构建跨平台的桌面应用程序。在这篇文章中，我们介绍了如何在Electron项目中使用NestJS，步骤包括创建一个新的NestJS项目、配置NestJS项目、在Electron中启动NestJS服务，并使用Electron调用NestJS服务。希望这对你开始使用Electron和NestJS开发桌面应用程序有所帮助！

Q&A

Q: 有源码吗？

当然有，地址如下：pear-rec，有兴趣的话可以大家一起探讨，同时也欢迎大家fork和star