Ale*_*lex 9 javascript typescript electron
我遵循了 Electron typescript 快速入门代码结构。基本上我克隆了仓库。它工作得很好，直到我想将代码拆分为多个 .ts 文件，并将它们导入渲染器脚本中。
然后我得到了Uncaught ReferenceError: exports is not defined. 由于 renderer.ts 顶部的这一行：
import { stuff } from "./otherfile.ts";
在挖掘更多信息后，似乎原因是"module": "commonjs"来自 tsconfig...但是如果我将其更改为，esnext那么 Electron 将不再加载预加载脚本！
有没有人真正设法让 Electron 和 typescript 完全正常工作？我的意思是，能够跨多个文件使用导入以及类似的东西吗？
文件结构：
/dist
/dist/main.js
/dist/preload.js
/dist/renderer.js
/dist/stuff.js
/src
/src/main.ts
/src/preload.ts
/src/renderer.ts
/src/stuff.ts
/index.html
/src/main.ts：
import { ipcMain } from "electron"; // imports work fine in main
...
ipcMain.on(...
/src/preload.ts：
import { contextBridge, ipcRenderer} from "electron"; // imports work fine in preload
contextBridge.exposeInMainWorld("my-api", { ....
/src/渲染器.ts
import stuff from "./stuff.ts"; // import fails in renderer (exports is not defined error)
/src/stuff.ts
const stuff = { ... };
export default stuff;
/index.html
<html>
...
<script src="./dist/renderer.js"></script>
</html>
ts.config：
如果我在 ts 编译文件后手动添加，则会收到不同的错误“require is not Define var exports = {}”renderer.js
抱歉，样板的配置方式是不可能的。
要在进程内部使用import/ ，您必须降低最新版本 Electron 中的默认安全设置，或者使用转译器，以便执行的最终代码不包含/ 。requirerendererrendererimportrequire
在该electron-quick-start-typescript项目中，您将找到该文件，该文件确认了该问题。
// 该文件是index.html 文件所必需的，
// 将在该窗口的渲染器进程中执行。 // 除非在 webPreferences 中将 nodeIntegration 设置为 true，
否则在此过程中没有可用的 Node.js API 。 // 使用 preload.js 有选择地启用 渲染器进程中所需的功能。
Node.js API 包括import和require.
此外，当您进行访问时require，如果启用了沙箱，那么您实际上获得的是填充版本，而不是基础版本require-请参阅有关预加载脚本沙箱的这些注释
除了更改样板之外，您唯一的其他选择是通过预加载脚本访问您需要的任何内容window.api.yourFunction。
您可能希望使用包含通过 Webpack 进行转译的样板，以便您能够import在渲染器进程内部使用。
我相信这两个样板都可以容纳它（如果您遇到其中一个问题，我可能可以给您一些建议）
PS - 如果您正在编写旨在分发给其他人的代码，请不要启用，nodeIntegration因为它会破坏 Electron 的安全模型！
PPS - 您也可以尝试"module": "ES2020"，这就是我们使用的 - 但它不会解决您无法import/require在renderer流程中的问题。
| 归档时间： |
|
| 查看次数： |
2165 次 |
| 最近记录： |