logo标签列表

寻找一个可用的Electron v8和TypeScript的简单示例

typescriptelectron
4

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

我正在寻找一个可工作的Electron v8和TypeScript的简单示例。它不需要包括WebPack、Babel、React或任何其他东西。我没有找到任何与Electron v8兼容的内容。

更新

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

标准的Electron & TypeScript示例没有演示以下内容：

  • 在渲染器进程中使用Node模块的import
  • 在渲染器进程中使用自己应用程序模块的import

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

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

使用require而不是import，特别是对于像EventEmitter这样的类，会使VS Code产生警告。

'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 "../".
3个回答
1
你需要四个文件： package.json，tsconfig.json，index.ts 和 index.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.x。

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应用程序。
0

我也找不到任何简单的 TypeScript Electron 入门示例... 所以我自己创建了一个。

这是我的代码库。它基于官方快速入门示例（但使用了 TypeScript）。

我还添加了 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 脚本提示。 - aabuhijleh
0

我在这里详细介绍了一个解决方案，你可以在这里的代码中找到。

您可以在渲染器进程中使用import来引入Node模块和自己的模块，进行以下更改：

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

这些内容大部分都归功于@kuba-orlik在这篇文章中的贡献，他让我朝着正确的方向前进。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接