Electron 桌面开发

Siona

Electron 桌面开发

Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。嵌入 Chromium 和 Node.js 到二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建在 Windows 上运行的跨平台应用 macOS 和 Linux —— 不需要本地开发经验。

1. 项目中，安装 electron

# npm 安装
npm install --save-dev electron

# 使用 yarn 安装会遇到以下报错，可能原因是 github 服务器网络不稳定，需要设置 github 仓库源【暂未解决，直接使用 npm 安装即可】
yarn add --dev electron

报错：

(base) xinna@xinnas-MacBook-Air electron_remote_desktop % yarn add electron      
yarn add v1.22.21
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
error /Users/xinna/Documents/WorkSpace/webstorm/siona/electron_remote_desktop/node_modules/electron: Command failed.
Exit CodeSnippets: 1
Command: node install.ts
Arguments: 
Directory: /Users/xinna/Documents/WorkSpace/webstorm/siona/electron_remote_desktop/node_modules/electron
Output:
RequestError: connect ETIMEDOUT 20.205.243.166:443
    at ClientRequest.<anonymous> (/Users/xinna/Documents/WorkSpace/webstorm/siona/electron_remote_desktop/node_modules/got/dist/source/core/index.ts:970:111)
    at Object.onceWrapper (node:events:632:26)
    at ClientRequest.emit (node:events:529:35)
    at origin.emit (/Users/xinna/Documents/WorkSpace/webstorm/siona/electron_remote_desktop/node_modules/@szmarczak/http-timer/dist/source/index.ts:43:20)
    at TLSSocket.socketErrorListener (node:_http_client:501:9)
    at TLSSocket.emit (node:events:517:28)
    at emitErrorNT (node:internal/streams/destroy:151:8)
    at emitErrorCloseNT (node:internal/streams/destroy:116:3)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16)
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

解决方案：

① 直接使用 npm 安装

npm install --save-dev electron

② 解决 yarn 的 git 源【暂未解决】

2. 4. 运行 electron 项目

npm run start

/Users/xinna/.nvm/versions/node/v18.19.0/bin/npm run start

> electron_remote_desktop@1.0.0 start
> electron .

2024-01-06 22:06:29.542 Electron[8191:230945] WARNING: Secure coding is automatically enabled 
for restorable state! However, not on all supported macOS versions of this application. 
Opt-in to secure coding explicitly by implementing NSApplicationDelegate.
applicationSupportsSecureRestorableState:.

自动启用安全编码
恢复状态!然而，并不是在所有支持的macOS版本的这个应用程序。
通过实现NSApplicationDelegate显式地选择安全编码.
applicationSupportsSecureRestorableState:。

报错

1. 安装完 Electron，然后 electron . 运行报错

报错信息

/Users/xinna/.nvm/versions/node/v20.10.0/bin/yarn run start
yarn run v1.22.21
$ electron .
2024-01-15 16:27:35.478 Electron[15897:288528] WARNING: Secure coding is automatically enabled for restorable state! 
However, not on all supported macOS versions of this application. 
Opt-in to secure coding explicitly by implementing NSApplicationDelegate.applicationSupportsSecureRestorableState:.
error Command failed with exit CodeSnippets 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Process finished with exit CodeSnippets 1

2. 在根目录创建了 `main.js` 和 `preload.js` 后报错

Users/xinna/.nvm/versions/node/v20.10.0/bin/yarn run start
yarn run v1.22.21
$ electron .
App threw an error during load
ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.ts' file extension 
and '/Users/xinna/Documents/WorkSpace/webstorm/siona/remote_desktop/package.json' contains "type": "module". 
To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///Users/xinna/Documents/WorkSpace/webstorm/siona/remote_desktop/main.ts:2:30
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
2024-01-15 16:52:16.758 Electron[16339:309374] WARNING: Secure coding is automatically enabled 
for restorable state! However, not on all supported macOS versions of this application. 
Opt-in to secure coding explicitly by implementing NSApplicationDelegate.applicationSupportsSecureRestorableState:.

注意：electron 还不支持 "type": "module" 需要在 package.json 中去掉 type:module

4. 修改 package.json 中 main: "electron-main/index.ts"，报错，不支持 `.ts` 文件扩展

/Users/xinna/.nvm/versions/node/v20.10.0/bin/yarn run start
yarn run v1.22.21
$ electron .
App threw an error during load
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /Users/xinna/Documents/WorkSpace/webstorm/siona/remote_desktop/electron-main/index.ts
    at new NodeError (node:internal/errors:405:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:80:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:125:36)
    at defaultLoad (node:internal/modules/esm/load:89:20)
    at nextLoad (node:internal/modules/esm/loader:163:28)
    at ESMLoader.load (node:internal/modules/esm/loader:603:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22)
    at new ModuleJob (node:internal/modules/esm/module_job:64:26)
    at #createModuleJob (node:internal/modules/esm/loader:480:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:434:34)
2024-01-15 17:35:48.683 Electron[17256:344139] WARNING: Secure coding is automatically enabled for restorable state! However, not on all supported macOS versions of this application. Opt-in to secure coding explicitly by implementing NSApplicationDelegate.applicationSupportsSecureRestorableState:.

5. 去掉 package.json 中 main 之后报错