Electron使用TypeScript

Posted 2023-05-03

参考技术A

需要先自行安装npm
手动创建一个如下结构文件目录(nodejs工程)用来运行electron,如下图:

命令行模式下,切换到工程根目录(这里就是test目录)

安装typescript:

安装electron:

自行建立上图中的各个文件 ,部分文件内容如下:
tsconfig.json

tsconfig更多具体配置参考官方文档:
https://www.tslang.cn/docs/handbook/compiler-options.html

package.json

"main": "./build/app.js" : 表示程序主入口是build目录下的app.js, app.js文件由是由tsc编译src/app.ts得到
"prestart":"tsc" : 表示在执行npm start之前先执行tsc进行当前工程目录的ts文件编译工作.

更多具体配置参考官方文档:
https://docs.npmjs.com/files/package.json

views/css目录和views/js目录 是具体业务逻辑:
index.html:

app.ts:

ClassA.ts:

在命令行模式中执行

显示结果:

Electron 和 TypeScript (electron-builder)：“不能在模块外使用 import 语句”

【中文标题】Electron 和 TypeScript (electron-builder)：“不能在模块外使用 import 语句”

【英文标题】：Electron & TypeScript (&electron-builder): "Cannot use import statement outside a module"

【发布时间】：2020-06-29 23:14:00

【问题描述】：

我想使用 electron-builder 构建一个带有 typescript 的电子应用程序。构建本身可以工作，但启动 app.exe 会出现此错误：“Cannot use import statement outside a module”

我猜我的 package.json 或 tsconfig.json 有问题。尝试了我能找到的一切，同样的错误。这是我目前的配置：

package.json：

  "main": "./src/main.ts",
  "type": "module",
  "scripts": 
    "build": "tsc",
    "watch": "tsc -w",
    "lint": "tslint -c tslint.json -p tsconfig.json",
    "start": "npm run build && electron ./dist/main.js",
    "pack": "electron-builder --dir",
    "dist": "electron-builder",
    "dist:dir": "yarn dist --dir -c.compression=store -c.mac.identity=null"
  ,
  "devDependencies": 
    "@types/node": "^12.12.7",
    "electron": "^8.1.0",
    "electron-builder": "^22.3.2",
    "tslint": "^5.19.0",
    "typescript": "^3.6.0"
  ,
  "dependencies": 
    "@types/jquery": "^3.3.31",
    "jquery": "^3.4.1",
    "jquery-ui-dist": "^1.12.1",
    "node-rest-client": "^3.1.0"
  ,
  "build": ......,
  "postinstall": "electron-builder install-app-deps"

tsconfig.json：

  "compilerOptions": 
    "module": "commonjs",
    "target": "es5",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "suppressImplicitAnyIndexErrors": true,
    "noImplicitAny": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist",
    "removeComments": true,
    "preserveConstEnums": true,
    "baseUrl": ".",
    "paths": 
      "*": ["node_modules/*"]
    
  ,   
  "include": [
    "src/**/*"
  ],
  "exclude": [ "node_modules" ] 

【问题讨论】：

没有帮助对不起。该错误在调用 main.ts 中的第一个导入时出现： import app, BrowserWindow, Menu, Tray from "electron";

据我所知，TypeScript 需要使用它的工具 tsc 转译成 JavaScript。

【参考方案1】：

我找到了解决方案：我划分了输出目录： /out 用于纱线启动过程 /dist 用于纱线 dist 进程

别忘了把ts文件中的所有路径都改成/out目录