12分钟搞定简单electron-vite-react-ts

壹贰叁肆伍上山打老虎
508 阅读1分钟

12分钟搞定简单electron-vite-react-ts

注意各版本准为当前最新版本（Node.js 版本18+）

搭建Vite项目

npm create vite@latest

√ Project name: electron-vite-react-ts
√ Select a framework: React
√ Select a variant: TypeScript + SWC

cd electron-vite-react-ts

npm install

然后我们修改一些配置

修改package.json

删除 "type": "module",

新增"main": "main.js",

{
    "name": "electron-vite-react-ts",
    "private": true,
    "version": "1.0.0",
    "main": "main.js",
    "scripts": {
        "dev": "vite",
        "build": "tsc && vite build",
        "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
        "preview": "vite preview"
    },
    "dependencies": {
        "react": "^18.2.0",
        "react-dom": "^18.2.0"
    },
    "devDependencies": {
        "@types/react": "^18.2.66",
        "@types/react-dom": "^18.2.22",
        "@typescript-eslint/eslint-plugin": "^7.2.0",
        "@typescript-eslint/parser": "^7.2.0",
        "@vitejs/plugin-react-swc": "^3.5.0",
        "eslint": "^8.57.0",
        "eslint-plugin-react-hooks": "^4.6.0",
        "eslint-plugin-react-refresh": "^0.4.6",
        "typescript": "^5.2.2",
        "vite": "^5.2.0"
    }
}

接下来我们安装electron

npm install electron --save-dev

安装完成后，创建main.js、index.html文件

main.js

const { app, BrowserWindow } = require("electron/main");
const path = require("node:path");

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
  });

  win.loadFile(path.join(__dirname, "dist", "index.html"));
}

app.whenReady().then(() => {
  createWindow();

  app.on("activate", () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

注意：require会报错，可以在.eslintrc.js中添加rules

rules: {
    "no-undef": ["error", { allowGlobals: ["__dirname"] }],
  },

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      http-equiv="Content-Security-Policy"
      content="script-src 'self' 'unsafe-inline';"
    />
    <title>electron-vite-react-ts</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

做完这些，我们安装electron打包依赖

npm install --save-dev @electron-forge/cli
npx electron-forge import

最后我们在package.json配置文件中的scripts字段下增加一条start命令

{
    "scripts": {
        "start": "tsc && vite build && electron-forge start",
    }
}

最后的最后我们运行一下

npm start

运行结果：

image.png

注意：我们还要配置vite的打包路径，否则vite打包后的图片不显示，在vite.config.ts文件中defineConfig配置下添加base: "./",

export default defineConfig({
  plugins: [react()],
  base: "./",
})
avatar
文章
阅读
粉丝