Fatal编程技术网
  • typescript/
  • 正在寻找Electron v8和TypeScript的一个简单示例

正在寻找Electron v8和TypeScript的一个简单示例

typescript electron

正在寻找Electron v8和TypeScript的一个简单示例,typescript,electron,Typescript,Electron,请原谅我原告问题的简单性，我快智穷了 我正在寻找一个Electron v8和TypeScript的简单示例。它不需要包括WebPack、Babel、React或其他任何内容。我发现的任何东西似乎都不适用于Electron v8 更新 我先前的陈述让我想起了麦克白的台词——这是一个故事 由一个白痴说的，充满了喧嚣和愤怒，毫无意义，所以这次让我们以细节来陈述问题 未证明以下内容： 对渲染器进程中的节点模块使用import 在渲染器进程中为我自己的应用程序模块使用import 尝试执行此操作时未收

请原谅我原告问题的简单性，我快智穷了

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

更新 我先前的陈述让我想起了麦克白的台词——这是一个故事 由一个白痴说的，充满了喧嚣和愤怒，毫无意义，所以这次让我们以细节来陈述问题

未证明以下内容：

  • 对渲染器进程中的节点模块使用
    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代码给人的印象是我可以导入节点模块，但在运行时仍然失败

Uncaught TypeError: Failed to resolve module specifier "events". Relative references must start with either "/", "./", or "../".
您需要四样东西：
package.json
，
tsconfig.json
，
index.ts
和
index.html

我的示例基于一篇文章和一篇关于如何使用的博客文章

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，并使用项目作为应用程序目录启动。我不知道需要的TypeScript的最低版本，但它是3个左右

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

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true 
  },
  "exclude": ["node_modules"] 
}
这将编译它在
node_模块
之外找到的任何类型脚本文件，并在它们旁边生成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);
这是一些启动电子的样板代码，所有类型都是推断出来的

最后，
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 document.write（process.versions.node），
Chrome文档.write（进程.版本.Chrome），
和Electron document.write（process.versions.Electron）。
这将显示node、Chrome和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"
  }
}
如果这些文件位于同一目录中，运行
npm start
应该编译类型脚本并启动Electron应用程序。

我也找不到任何简单的Electron类型脚本启动程序示例。。。所以我创造了我自己的

。它基于（但使用typescript）

我还添加了electron builder，以便轻松构建不受干扰的软件包

#安装依赖项
$npm安装
#编译类型脚本文件
$npm运行编译
#监视typescript文件的更改
$npm跑步手表
#运行应用程序
$npm开始
#为特定平台创建可分发的包
$npm运行区linux
$npm运行区mac
$npm运行区窗口
我找到了一个解决方案，我将在这里详细介绍，您可以找到

您可以在渲染器过程中为节点模块和您自己的模块使用
import
，以进行以下更改：

  • 在主进程中构建
    浏览器窗口时，请将
    节点集成设置为
    true
  • 从HTML页面中加载JavaScript代码时，请使用
    require（'./renderer.js'）
    而不是更传统的
    • 这大部分归功于@kuba orlik in，它让我走上了正确的方向。

    感谢@matt champion提供了
    启动前的
    脚本提示