Vite 搭配 Electron 整理(不使用TypeScript)

malagege included in Vite

2021-10-09 416 words 2 minutes

Contents

Vite 搭配 Electron 整理(不使用TypeScript)

目前好像沒有官方推薦的，不過我選方案一，因為官方有特別註明怎麼調回 JavaScript，我 TypeScript 還沒有學。Orz

調成 JavaScript

推薦看官網教學，也有可能因為時間更新而改變。

快速建置範本專案

Create a New Repository from cawa-93/vite-electron-builder

移除 JavaScript

Guide to disable typescript and remove dependencies · Discussion #339 · cawa-93/vite-electron-builder

In project root:

Remove vetur.config.js
Remove .github/workflows/typechecking.yml
Remove types directory
Remove tsconfig.json directory

In package.json

Remove buildEnvTypes, pretypecheck and all typecheck* sctipts(我找不到…)

1
2
3
4


    "typecheck-main": "tsc --noEmit -p packages/main/tsconfig.json",
    "typecheck-preload": "tsc --noEmit -p packages/preload/tsconfig.json",
    "typecheck-renderer": "vue-tsc --noEmit -p packages/renderer/tsconfig.json",
    "typecheck": "npm run typecheck-main && npm run typecheck-preload && npm run typecheck-renderer"

1

    "pre-push": "npm run typecheck"

Remove simple-git-hooks.pre-push and run npx simple-git-hooks to update git-hooks internal config

1

    "pre-push": "npm run typecheck"

1

npx simple-git-hooks

Remove unnecessary dependencies by:

1

    npm uninstall @types/electron-devtools-installer @typescript-eslint/eslint-plugin typescript vue-tsc

In .eslintrc.json Remove:

plugin:@typescript-eslint/recommended from extends
parser
parserOptions
@typescript-eslint from plugins
types/env.d.ts from ignorePatterns
All @typescript-eslint/* from rules

下面不要拿掉，不然git commit 會有錯誤(eslint 會報錯)

1
2
3
4


  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },

In packages/main:

Rewrite src/index.ts to src/index.js (改名)
In vite.config.js change build.lib.entry to src/index.js

Remove tsconfig.json

In packages/preload:

Rewrite src/index.ts to src/index.js
In vite.config.js change build.lib.entry to src/index.js
Remove tsconfig.json
Remove types directory

In packages/renderer:

Rewrite all files in src from TS to JS. If you want use Vue, you need remove lang="ts" attribute in all .vue files.

In index.html change script src attribute to you new entry file (it may be ./src/index.js for example).
Remove tsconfig.json
In .eslintrc.json remove parserOptions.parser
Remove types directory

ExtensionLoadWarning(無法解決)

(node:19656) ExtensionLoadWarning: Warnings loading extension at · Issue #943 · nklayman/vue-cli-plugin-electron-builder

1

npm install electron-devtools-installer --save-dev

1

const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer');

1
2
3
4
5
6
7
8


    try {
      await installExtension({
        id: 'ljjemllljcmogpfapbkkighbhhppjdbg', //Vue Devtools beta
        electron: '>=1.2.1'
      })
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }

彩蛋

調整 Electron 視窗資料，實用功能

MarshallOfSound/electron-devtools-installer: An easy way to ensure Chrome DevTools extensions into Electron

如何实现 electron 窗体透明 transparent 效果？

transparent: true

拖移視窗
electron程序，自定义标题栏的几个特殊css属性总结

-webkit-app-region: drag;

electron程序，如何隐藏窗体顶部菜单？

autoHideMenuBar:true
frame:false

Frameless window with controls in electron (Windows) - Stack Overflow

electron - 无边框、最大化、最小化、等比缩放问题_wanzheng_96的博客-CSDN博客

javascript - Electron require() is not defined - Stack Overflow
Electron 12+ 出現 require is not defined 報錯解決_Jesse_0 - MdEditor

electron - 无边框、最大化、最小化、等比缩放问题無法使用在最新版程式

1
2
3
4
5
6
7
8


app.on('ready', () => {
    mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        }
    });
});