【问题标题】：Looking for a _working_ simple example of Electron v8 and TypeScript寻找 Electron v8 和 TypeScript 的 _working_ 简单示例
【发布时间】：2020-06-02 15:09:44
【问题描述】：

请原谅我的原告问题很简单，我已经快要崩溃了。

我正在寻找一个工作 Electron v8 和 TypeScript 的简单示例。它不需要包括 WebPack、Babel、React 或其他任何东西。我发现没有任何东西似乎适用于 Electron v8。

更新

我之前的陈述让我想起了麦克白的台词 这是一个故事由一个白痴讲的，充满声音和愤怒，意味着什么，所以这次让我们详细说明这个问题。

stock Electron & Typescript example 不演示以下内容：

在渲染器进程中对 Node 模块使用 import
在渲染器进程中将import 用于我自己的应用程序模块。

尝试这样做没有收到来自tsc 的错误，但引发了运行时错误

ReferenceError: exports is not defined[Learn More]
exports.__esModule = true

使用require 而不是import，尤其是对于像EventEmitter 这样的类会发出警告

'EventEmitter' refers to a value, but is being used as a type here.ts(2749)

...所以这是一个倒退。

将tsconfig.json 中的target 设置为ES2018 意味着我可以为我自己的模块使用ES6 模块和import 语法，尽管它需要.js 后缀才能工作。

import {blah} from './MyModule.js'` // Shouldn't need that suffix!

VS Code 给人的印象是我可以import Node 模块，但它在运行时仍然失败。

Uncaught TypeError: Failed to resolve module specifier "events". Relative references must start with either "/", "./", or "../".

【问题讨论】：

标签： typescript electron

【解决方案1】：

你需要四个东西：package.json、tsconfig.json、index.ts 和 index.html。

我的示例基于 Electron tutorial 和有关使用 Electron and TypeScript 的博客文章。

package.json 需要引入 Electron 和 TypeScript 依赖，触发 TypeScript 构建并启动 Electron。

{
  "name": "electron-ts",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "prestart": "tsc",
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "8.0.1",
    "typescript": "3.7.5"
  }
}

预启动脚本编译 TypeScript 并使用项目作为应用程序目录开始运行 Electron。我不知道所需的 TypeScript 最低版本，但它是 3 的东西。

tsconfig.json 需要设置一些编译器选项，并在运行tsc 时确定要构建的内容。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true 
  },
  "exclude": ["node_modules"] 
}

这将编译它在node_modules 之外找到的任何 TypeScript 文件，并与它们一起生成 JavaScript。

index.ts 需要创建浏览器窗口并加载登录页面。

import { app, BrowserWindow } from 'electron';

function createWindow () {
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });
  win.loadFile('index.html');
}

app.allowRendererProcessReuse = true;
app.whenReady().then(createWindow);

这是一些启动 Electron 的样板代码，所有类型都是推断出来的。

最后，index.html 需要显示您可以识别的内容。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

这将显示 node、Chrome 和 Electron 的版本。

将这些文件放在同一目录中，运行 npm start 应该编译 TypeScript 并启动 Electron 应用程序。

【讨论】：

【解决方案2】：

我也找不到任何简单的电子打字稿入门示例......所以我创建了自己的。

Here's my repository。它基于official quick start starter（但带有打字稿）。

我还添加了 electron-builder 来轻松构建可干扰的包。

# install dependencies
$ npm install

# compile typescript files
$ npm run compile

# watch typescript files for changes
$ npm run watch

# run the app
$ npm start

# create distributable packages for specific platforms
$ npm run dist-linux
$ npm run dist-mac
$ npm run dist-windows

【讨论】：

感谢@matt-champion 提供prestart 脚本提示

【解决方案3】：

我找到了一个解决方案，我将在此处详细说明，您可以找到available in code here。

您可以在渲染器进程中为 Node 模块和您自己的模块使用 import 进行这些更改：

在主进程中构造BrowserWindow时，将nodeIntegration设置为true。
从 HTML 页面中加载 JavaScript 代码时，使用 <script>require('./renderer.js')</script> 而不是更传统的 <script src="./renderer.js"></script>。

这大部分归功于@kuba-orlikthis post，这让我朝着正确的方向前进。

【讨论】：