如何在 Electron 渲染器進程中使用像 RxJs 這樣的模塊？

Question

我正在嘗試將 RxJs（或任何其他非節點庫，例如）添加到啟用了 contextIsolation 的電子渲染器進程中。 我也在使用打字稿。

如果我在 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';

其他一切基本上都是電子樣板。

Answer 1

我已經部分解決了這個問題，但沒有完全理解這個問題。 javascript/node 中的模塊情況非常混亂。

基本上，為了讓默認的tsc --init配置工作，你需要一個模塊加載器，比如 webpack。 這就是我最終添加的內容，我不會進一步弄亂它。

在此之前，我嘗試切換到本機瀏覽器模塊。 要在 tsconfig 中執行此操作，我相信正確的設置是

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

您還必須將type="module"添加到您的script標記中。

問題是 mainProcess 代碼搞砸了。 在我的 mainProcess 代碼中，我對節點模塊使用require並為我自己的打字稿類使用import ，因為我想要代碼完成和打字稿編譯器檢查。 我想如果我想使用本機導入或以某種方式配置打字稿來處理與渲染過程代碼不同的主流程代碼，我將不得不切換到一種或另一種格式。 這看起來工作量太大，所以我只是添加了 webpack 來捆綁我的渲染器端。