也许看了Electron你会理解Tauri,扩宽你的技术栈

也许看了Electron你会理解Tauri

1、认识安装

👉 Electron官网

javascript 复制代码

Electron官网
https://www.electronjs.org/

Electron中文官网
https://electron.nodejs.cn/

👉Electron认识

官方给我们的解释是这样子的：

Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用的框架。通过将 Chromium 和 Node.js 嵌入到其二进制文件中，Electron 允许你维护一个 JavaScript 代码库并创建可在 Windows、macOS 和 Linux 上运行的跨平台应用 - 无需原生开发经验。

个人理解其实最主要核心的就是把浏览器环境和我们的html、css、js代码结合起来，最后跑到桌面端上面，最关键的还是把环境嵌进入使用。

2、安装和使用

👉搭建项目

🍎 新建一个空白文件NexusElectron，使用yarn初始化

javascript 复制代码

yarn init

🍎 安装Electron脚手架

过程之中可能有些慢，慢慢耐心等待

javascript 复制代码

yarn add --dev electron

// 如果升级版本
yarn add --dev electron@latest

🍎`.gitignore`添加忽略文件如下，这里是官方给我们提供的

javascript 复制代码

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Snowpack dependency directory (https://snowpack.dev/)
web_modules/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional stylelint cache
.stylelintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variable files
.env
.env.*
!.env.example

# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache

# Next.js build output
.next
out

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# vuepress v2.x temp and cache directory
.temp
.cache

# vitepress build output
**/.vitepress/dist

# vitepress cache directory
**/.vitepress/cache

# Docusaurus cache and generated files
.docusaurus

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

# Stores VSCode versions used for testing VSCode extensions
.vscode-test

# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*

👉运行项目

🍎新建一个入口文件`index.js`

javascript 复制代码

// main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');
console.log('Hello from Electron 👋')
function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  });

  mainWindow.loadFile('index.html');
}

app.on('ready', createWindow);

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

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

🍎新建一个首页 index.html

javascript 复制代码

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Electron App</title>
</head>
<body>
  <h1 style="color:#3237d8">Hello, Electron!</h1>
</body>
</html>

这里首页你写点啥都行

🍎修改配置文件package.json

javascript 复制代码

{
  "name": "NexusElectron",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Lintaibai",
  "license": "MIT",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "electron": "^36.4.0"
  }
}

🍎启动项目

用我们上面自定义的命令启动项目

javascript 复制代码

yarn start  //启动项目

项目启动如图

接下来就可以愉快的进行我们项目开发了

👉打包项目

打包这里我们需要额外注意，之前使用的打包命令很多已经失效了

🍎 打包命令

javascript 复制代码

yarn add electron-builder --save-dev  //已经失效的打包命令

//新的打包命令 两者配合使用
npm install --save-dev @electron-forge/cli
yarn dlx electron-forge import

🍎导入 Forge 配置到项目

使用yarn dlx electron-forge import命令的时候报错

javascript 复制代码

D:\LTB-2025\code\NexusElectron>yarn dlx electron-forge import
yarn run v1.22.22
error Command "dlx" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

原因

javascript 复制代码

dlx 是 Yarn 1.22.0 引入的一个功能，它允许你临时安装并运行一个包，而无需全局安装。
Yarn 版本低于 1.22.0无法使用，需要升级 Yarn 才能使用 dlx 命令。

解决方案：这里我们升级一下yarn或者使用npx代替，这里我直接使用npx

javascript 复制代码

npx electron-forge import  //采用

//导入 Forge 配置到项目

完成以后提示我们

javascript 复制代码

√ Checking your system
√ Locating importable project
√ Processing configuration and dependencies
  √ Resolving package manager: npm
  √ Installing dependencies
  √ Copying base template Forge configuration
  √ Fixing .gitignore
√ Finalizing import

› We have attempted to convert your app to be in a format that Electron Forge
understands.

Thanks for using Electron Forge!

🍎调整配置`package.json`

javascript 复制代码

{
  "name": "NexusElectron",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Lintaibai",
  "license": "MIT",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "dependencies": {
    "electron-squirrel-startup": "^1.0.1"
  },
  "devDependencies": {
    "@electron-forge/cli": "^7.8.1",
    "@electron-forge/maker-deb": "^7.8.1",
    "@electron-forge/maker-rpm": "^7.8.1",
    "@electron-forge/maker-squirrel": "^7.8.1",
    "@electron-forge/maker-zip": "^7.8.1",
    "@electron-forge/plugin-auto-unpack-natives": "^7.8.1",
    "@electron-forge/plugin-fuses": "^7.8.1",
    "@electron/fuses": "^1.8.0",
    "electron": "^36.4.0"
  }
}

🍎打包安装包

javascript 复制代码

yarn start  // 启动 没毛病

yarn package //打包成可安装包

最后我们打完的包位置out目录下面

javascript 复制代码

NexusElectron\out\NexusElectron-win32-x64

双击exe文件，启动的跟我们的网页差不多，可以看到我们的包大小192M，这样一对比，Tauri的初心似乎有点理解了

3、使用 VS Code 调试

在根目录新建一个 .vscode 文件夹，然后在其中新建一个 launch.json 配置文件并填写如下内容

javascript 复制代码

{
  "version": "0.2.0",
  "compounds": [
    {
      "name": "Main + renderer",
      "configurations": ["Main", "Renderer"],
      "stopAll": true
    }
  ],
  "configurations": [
    {
      "name": "Renderer",
      "port": 9222,
      "request": "attach",
      "type": "chrome",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Main",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "args": [".", "--remote-debugging-port=9222"],
      "outputCapture": "std",
      "console": "integratedTerminal"
    }
  ]
}

这个时候当我们选择侧边栏的"运行和调试"，出现一个 "Main + renderer" 选项。就可以设置断点，并跟踪主进程和渲染器进程中的所有变量。

也许看了Electron你会理解Tauri,扩宽你的技术栈