目录
一、初始化package.json
二、安装依赖
三、项目结构
四、配置启动项
五、补充：ts转js别名问题
已整理好的开源代码：Type-Electron: 用typescript开发的electron项目脚手架，轻量级、支持一键配置网页转PC - Gitee.com
一、初始化package.json
我的：这里的"main"没太大影响，看后面的步骤。
{
"name": "xloda-cloud-ui-pc",
"author": "Dragon Wu",
"description": "XLODA龙达云PC前端",
"version": "0.1.0",
"private": true,
"main": "src/main.ts",
"scripts": {
"start": "tsc && tsc-alias && electron ./.electron/main.js",
"lint": "eslint ./src"
},
"devDependencies": {
"@eslint/js": "^9.19.0",
"@types/node": "^22.12.0",
"electron": "^33.3.1",
"eslint": "^9.19.0",
"globals": "^15.14.0",
"tsc-alias": "^1.8.10",
"typescript": "^5.7.3",
"typescript-eslint": "^8.22.0"
},
"dependencies": {}
}
二、安装依赖
1、安装electron
yarn add electron -D2、安装typescript依赖
yarn add @types/node typescript -D3、安装eslint
yarn create @eslint/config官方文档：ESLint 入门 - ESLint - 可插拔 JavaScript Linter
三、项目结构
electron使用typescript运行的宗旨就是让electron运行main.ts通过typescript转编译后的js文件，因为electron只能直接运行js文件：
main.ts:
/**
* @author Dragon Wu
* @since 2025/1/12 20:18
*/
import {app, BrowserWindow} from "electron";
// 禁用启动的警告
process.env["ELECTRON_DISABLE_SECURITY_WARNINGS"] = "true";
// 内嵌app的链接
const APP_URL = "http://localhost:3000";
app.on("ready", () => {
const mainWindow = new BrowserWindow({
width: 1200,
height: 800
})
mainWindow.loadURL(APP_URL).then()
});
四、配置启动项
使用main.js作为入口文件时，我们只要找到main.js路径配置到package.json的“main”位置就行了，但直接改.ts肯定会报错，所以我们需要让electron找到main.ts编译后转的.js文件的位置。
这里我们需要修改tsconfig.json如下：
{
"compilerOptions": {
"module": "commonjs",
"target": "es2018",
"noImplicitAny": true,
"sourceMap": true,
"outDir": "./.electron", # ts 编译转为 js 后的目录位置
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
},
"include": [
"**/*.ts",
"**/*.tsx"
],
"exclude": [
"node_modules"
]
}
终端运行：你会看到项目的ts文件被转为js文件存到了“outDir”指向的文件夹里（这里是".electron"）
tsc由此，可以在启动项做文章：
"scripts": {
"start": "tsc && electron ./.electron/main.js",
},终端运行：可以看到electron程序正常启动了。
yarn run start五、配置eslint
安装官网的配置方法，项目根目录会产生一个eslint.config.mjs文件，这个文件可以配置自定义rules，案例如下：
import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";
/** @type {import('eslint').Linter.Config[]} */
export default [
{files: ["**/*.{js,mjs,cjs,ts}"]},
{languageOptions: {globals: globals.node}},
pluginJs.configs.recommended,
...tseslint.configs.recommended,
{
rules: {
"import/first": "off",
"import/order": "off",
}
}
];配置运行脚本：
"scripts": {
"lint": "eslint ./src"
},这里elint会检测 ./src下的ts文件的书写规范，若你有更多文件夹需要检测可以按照这种格式来:
eslint ./src ./example ./xxx终端运行：
yarn run lint即可进行eslint纠正检测。
亲测有效！
五、补充：ts转js别名问题
如ts文件里的文件路径：
import setApplicationMenu from "@/app/menu";
默认转编译后的js文件里的路径是：
const menu_1 = require("@/app/menu");
由于js不支持@来定位文件，所以使用“@/"来指定路径时会报错，解决方案如下：
安装路径转译模块：
yarn add tsc-alias -D修改启动项的
tsc为：
tsc && tsc-alias最终启动项配置：
"start": "tsc && tsc-alias && electron ./.electron/main.js"执行：
yarn run start 别名路径被解析，启动成功！~
