如何在 Electron 中使用 Typescript 脚本？答案

【问题标题】：How to use Typescript scripts with Electron?如何在 Electron 中使用 Typescript 脚本？
【发布时间】：2021-12-24 04:32:27
【问题描述】：

我正在构建一个基本的电子应用程序，我想在其中引用一个脚本

    <script src="build/script.js"></script>

我确实有一个script.ts 文件，它编译为build 文件夹

import { dialog } from 'electron'

const openFileLocationDialog = () => {
  dialog.showOpenDialog({ properties: ['openFile'] })
}

const sourceButton = document.getElementById('button') 
sourceButton!.addEventListener('click', openFileLocationDialog)

但是当我运行应用程序时，我得到了错误

script.ts:1 Uncaught ReferenceError: require is not defined
    at script.ts:1

即使script.ts 没有在任何地方引用。

这里的行动方针是什么？我真正想要的是有一个按钮来选择一个文件。

【问题讨论】：

你是如何编译到构建目录的？你的 tsconfig 是什么样的？
``` { "compilerOptions": { "target": "es5", "module": "commonjs", "sourceMap": true, "outDir": "./build", "严格”：真，“esModuleInterop”：真}}```

标签： typescript electron

【解决方案1】：

您需要以网络兼容格式导出库，而不是 nodeJS (cjs) 格式，因为错误基本上是说它不知道如何require。

这不完全是一个电子问题，如果你只是创建一个index.html 并将你的脚本放在那里，你会得到同样的错误。

【讨论】：