寻找电子v8和TypeScript的_working_简单示例

问题描述 投票:3回答:2

原谅我的原告问题的简单性,我已接近机智。

我正在寻找Electron v8和TypeScript的正在工作简单示例。它不需要包含WebPack,Babel,React或其他任何东西。我发现似乎没有任何东西可以与Electron v8一起使用。

typescript electron
2个回答
1
投票

您将需要四件事:package.jsontsconfig.jsonindex.tsindex.html

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

[C0需要引入Electron和TypeScript依赖项,触发TypeScript构建并启动Electron。

package.json

prestart脚本编译TypeScript,然后使用项目作为应用程序目录开始运行Electron。我不知道所需的TypeScript的最低版本,但它只有3个。

{ "name": "electron-ts", "version": "1.0.0", "main": "index.js", "scripts": { "prestart": "tsc", "start": "electron ." }, "devDependencies": { "electron": "8.0.1", "typescript": "3.7.5" } } 需要设置一些编译器选项,并确定在运行tsconfig.json时要构建的内容。

tsc

这将编译它在{ "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "noImplicitAny": false, "suppressImplicitAnyIndexErrors": true }, "exclude": ["node_modules"] } 之外找到的所有TypeScript文件,并在它们旁边生成JavaScript。

node_modules需要创建一个浏览器窗口并加载登录页面。

index.ts

这是一些用于启动Electron的样板代码,可以推断所有类型。

最后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

这将显示节点的版本,Chrome和Electron。

将这些文件放在同一目录中,运行<!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> 应该编译TypeScript并启动Electron应用程序。


0
投票

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

npm start。它基于Here's my repository(但带有打字稿)。

[我还添加了电子生成器,以便轻松构建易打扰的包装。

official quick start starter

推荐问答