通过requirejs导入电子答案

【问题标题】：Importing electron through requirejs通过requirejs导入电子
【发布时间】：2020-12-12 22:19:42
【问题描述】：

我知道那里有很多这样的帖子，但我无法修复它，所以这是我最好的选择。

我正在使用 electron 为我的 Ionic React 应用程序制作桌面包装器。

我有一个这样的目录结构：

 > electron
      > src
          - index.ts
          > splashScreen
              - splashScreen.ts
      > assets
          - splash.html
          > scripts
              - splash.js

在index.ts 中，我创建了一个新的启动画面实例。它从assets/splash.html加载html文件。

html 包含一个名为 loading_text 的 div 元素，这是启动屏幕的文本需要去的地方。我通过ipcMain 使用事件来控制 div 显示的内容。所以在SplashScreen.ts中，setText函数是这样的：

function setText(text: string) {
    ipcMain.emit(events.SPLASH_SCREEN_TEXT_CHANGE, text)
}

在splash.js 中，我像这样监听那个事件：

var _ = require("electron");

var on = _.icpMain.on;
on('OL:SPLASH_SCREEN_TEXT_CHANGE', (event, text) => {
    document.getElementById("loading_text").innerHTML = text;
});

这不起作用，因为require 不存在浏览器端。我已经尝试了很多东西，但我仍然无法导入电子。

我开始尝试：

webPreferences: {
      nodeIntegration: true,
}

但它仍然会引发与require is not defined 相同的错误。我尝试了其他一些东西，主要的是requireJS。我把JS文件放在assets/scripts/下面，把splash.js修改成这样：

//requirejs.config({
//    baseUrl: '../../node_modules/',
//});


var _ = requirejs(["electron"]);

var on = _.icpMain.on;
on('OL:SPLASH_SCREEN_TEXT_CHANGE', (event, text) => {
    document.getElementById("loading_text").innerHTML = text;
});

只会抛出Script error for "electron" 的错误。转到 requireJS 文档，它说要检查文件是否有语法错误，但实际上并没有加载文件：Failed to load resource: net::ERR_FILE_NOT_FOUND electron.js:1

我还阅读了文档中的 Node 部分，但我对应该将 require.js 放在哪里以及将配置放入哪个脚本感到困惑（尽管这可能是 index.ts）

【问题讨论】：

标签： electron requirejs

【解决方案1】：

我设法让它工作。而不是requirejs，我尝试了browserify。我捆绑了splash.js 并在 html 中链接。它抛出了一个错误：

fs.existsSync is not a function

我做了一些研究，发现了this SO 帖子，它不仅说要使用：

webPreferences: {
      nodeIntegration: true,
}

但也可以使用window.require 而不是require。完成此操作后，我能够在脚本中导入电子。

【讨论】：