如何在Electron渲染器过程中使用RxJs之类的模块

Question

我正试图在启用contextIsolation的情况下将RxJs(或任何其他非节点库(添加到电子渲染器进程中。我也在使用Typescript。

如果我在render.ts中需要或导入"rxjs"，加载失败：Uncaught ReferenceError: exports is not defined.我看过其他解决方案，认为这可能是一个typescript配置问题，但目标和模块设置的各种排列似乎没有什么区别。

当前设置。

"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
}
});

将其单独添加到render.ts编译的顶部，事实上，如果我尝试使用rxjs，但无法在index.html 中加载，则需要进行编译

import { BehaviorSubject } from 'rxjs';

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

Answer 1

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

基本上，要使默认的tsc --init配置正常工作，您需要一个模块加载程序，如webpack。这就是我最终补充的内容，我不会再搞砸了。

在此之前，我尝试切换到本机浏览器模块。要在tsconfig中做到这一点，我相信正确的设置是

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

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

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