时间戳

首页 > 解决方案 > 寻找 Electron v8 和 TypeScript 的 _working_ 简单示例

typescript - 寻找 Electron v8 和 TypeScript 的 _working_ 简单示例

问题描述

原谅我的原告问题的简单性，我已经接近我的智慧了。

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

更新

我之前的陈述让我想起了麦克白的台词，这是一个白痴讲的故事，充满了喧嚣和愤怒，没有任何意义，所以这次让我们详细说明问题。

股票电子和打字稿示例不演示以下内容：

尝试这样做没有错误，tsc但引发了运行时错误

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

使用require而不是import，尤其是对于像EventEmitter不高兴的 VS 代码这样警告的类

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

......所以这是一个倒退的步骤。

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

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

VS Code 给人的印象是我可以使用importNode 模块，但在运行时仍然会失败。

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

标签： typescriptelectron

解决方案

您将需要四样东西：package.json、tsconfig.json和。index.tsindex.html

我的示例基于Electron 教程和一篇关于使用Electron 和 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"] 
}

这将编译它在外部找到的任何 TypeScript 文件，node_modules并在它们旁边生成 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 应用程序。

推荐阅读