如何在 Electron 渲染器进程中使用 RxJs 等模块？答案

【问题标题】：How do I use modules like RxJs in the Electron renderer process?如何在 Electron 渲染器进程中使用 RxJs 等模块？
【发布时间】：2021-03-07 19:19:02
【问题描述】：

我正在尝试将 RxJs（或任何其他非节点库，例如）添加到启用 contextIsolation 的电子渲染器进程。我也在使用 Typescript。

如果我在 renderer.ts 中需要或导入“rxjs”，则加载失败：Uncaught ReferenceError: exports is not defined. 我查看了其他解决方案，这可能是打字稿配置问题，但目标和模块设置的各种排列似乎没有有所作为。

当前设置。

"target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    // "lib": [],

在 main.js 中

    var mainWindow = new BrowserWindow({
        width: 1600,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, 'dist/preload.js'),
            enableRemoteModule: false,
            nodeIntegration: false,
            contextIsolation: true,
            sandbox: true
        }
    });

将它单独添加到 renderer.ts 的顶部会编译，如果我尝试使用 rxjs，实际上需要编译，但不会加载到 index.html

import { BehaviorSubject } from 'rxjs';

其他一切基本上都是电子样板。

【问题讨论】：

标签： javascript typescript rxjs electron

【解决方案1】：

我已经部分解决了这个问题，但没有完全理解这个问题。 javascript/node中的模块情况很混乱。

基本上，要让默认的tsc --init 配置工作，您需要一个模块加载器，例如 webpack。这是我最终添加的，我不会再搞砸了。

在此之前，我尝试切换到本机浏览器模块。要在 tsconfig 中执行此操作，我相信正确的设置是

"target": "es5",
"module": "es2015",
"moduleResolution": "node",

您还必须将type="module" 添加到您的script 标记中。

问题在于 mainProcess 代码搞砸了。在我的 mainProcess 代码中，我将require 用于节点模块，将import 用于我自己的打字稿类，因为我想要代码完成和打字稿编译器检查。我想如果我想使用本机导入或以某种方式配置打字稿来处理不同于渲染进程代码的主进程代码，我将不得不切换到一种或另一种格式。这看起来工作量太大，所以我只是添加了 webpack 来捆绑我的渲染器端。

【讨论】：