做一个京东网站怎么做,网站程序组成,机关单位网站安全建设,宣传网页目录
一、初始化package.json
二、安装依赖
1、安装electron
2、安装typescript依赖
3、安装eslint
三、项目结构
四、配置启动项 一、初始化package.json
我的#xff1a;这里的main没太大影响#xff0c;看后面的步骤。
{name: xlo…目录
一、初始化package.json
二、安装依赖
1、安装electron
2、安装typescript依赖
3、安装eslint
三、项目结构
四、配置启动项 一、初始化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 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,typescript: ^5.7.3,typescript-eslint: ^8.22.0},dependencies: {}
}
二、安装依赖
1、安装electron
yarn add electron -D
2、安装typescript依赖
yarn add types/node typescript -D
3、安装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纠正检测。
亲测有效
