Electron学习应用程序打包实例详解

Electron是一种开源的框架，可以使用HTML，CSS和JS来开发桌面应用程序。在本文中，我们将重点介绍如何打包Electron应用程序。

安装Electron Builder

Electron Builder是一种著名的Electron打包工具，它可以将Electron应用程序打包成可执行文件。首先，我们需要使用npm安装Electron Builder。打开电脑的终端或控制台并输入以下命令：

npm install electron-builder --save-dev

在这个命令中，我们通过npm安装了Electron Builder并将其保存到开发依赖中。接下来，我们需要编辑我们应用程序的package.json文件以添加构建配置。

添加构建配置

要使用Electron Builder构建和打包我们的程序，我们需要配置一些构建参数。在我们的package.json文件中，我们需要添加一个“build”属性，如下所示：

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "build": {
    "appId": "com.example.my-electron-app",
    "productName": "My Electron App",
    "publish": [
      {
        "provider": "github",
        "owner": "my-github-username",
        "repo": "my-github-repo"
      }
    ]
  },
  "devDependencies": {
    "electron": "^7.1.2",
    "electron-builder": "^21.2.0"
  }
}

在这个例子中，我们将应用程序的构建配置添加到package.json文件中。其中，“appId”和“productName”是构建配置的基本参数。如果您需要将程序发布到GitHub等第三方托管平台上，可以使用“publish”属性。

现在，我们已经完成了程序的构建配置。接下来，我们将通过一个示例来演示如何使用Electron Builder打包我们的应用程序。

示例1：打包Hello World应用程序

首先，我们将创建一个简单的Hello World的Electron应用程序。我们需要创建以下文件：

index.html - 用于显示Hello World消息的HTML文件。
main.js - 用于创建一个Electron窗口的JavaScript文件。

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Hello World</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is my first Electron app.</p>
</body>
</html>

main.js

const { app, BrowserWindow } = require('electron')

function createWindow () {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加载index.html文件
  win.loadFile('index.html')

  // 打开开发者工具
  win.webContents.openDevTools()
}

// 当Electron准备好创建窗口时调用createWindow()方法
app.whenReady().then(createWindow)

在这个示例中，我们创建了一个简单的Electron应用程序，它会在窗口中显示Hello World消息。

接下来，我们需要使用Electron Builder打包我们的程序。在终端或控制台中，输入以下命令：

npm run build

这个命令将启动Electron Builder，并开始构建和打包我们的应用程序。完成后，Electron Builder将生成一个dist目录，其中包含可执行文件。

现在，我们的Hello World应用程序已经打包成可执行文件，可以在任何Windows、macOS和Linux操作系统上运行。

示例2：打包React应用程序

除了Hello World应用程序之外，我们还可以使用Electron Builder打包React应用程序。在这个示例中，我们将使用Create React App创建一个新的React项目，并使用Electron打包它。

创建一个React项目

在终端或控制台中，输入以下命令来创建一个新的React项目：

npx create-react-app my-electron-react-app
cd my-electron-react-app

在这个示例中，我们创建了一个名为“my-electron-react-app”的新的React项目，并将工作目录切换到新创建的项目。

接下来，我们需要在我们的React项目中添加Electron。输入以下命令：

npm install --save-dev electron

这个命令将在React项目中安装Electron依赖项。

添加Electron入口文件

在我们的React项目中，我们需要添加一个Electron入口文件。创建一个名为“electron.js”的新文件，并添加以下内容：

const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')

let win

const createWindow = () => {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  if(process.env.NODE_ENV === 'development') {
    win.loadURL("http://localhost:3000/")
  } else {
    win.loadURL(
      url.format({
        pathname: path.join(__dirname, '../build/index.html'),
        protocol: 'file:',
        slashes: true
      })
    )
  }

  win.on('closed', () => {
    win = null
  })

  win.webContents.openDevTools()
}

app.on('ready', createWindow)

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

app.on('activate', () => {
  if(win === null) {
    createWindow()
  }
})

在这个文件中，我们创建了一个名为“createWindow”的函数，用于创建Electron窗口。我们还使用了“path”和“url”模块来加载React页面。

修改package.json

在我们的React项目中，我们需要更新package.json文件以添加构建配置。打开package.json文件并添加以下配置：

{
  "name": "my-electron-react-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "./",
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-scripts": "3.3.0"
  },
  "devDependencies": {
    "electron": "^7.1.2",
    "electron-builder": "^21.2.0"
  },
  "build": {
    "appId": "com.example.my-electron-react-app",
    "productName": "My Electron React App",
    "directories": {
      "output": "build"
    },
    "files": [
      "build/**/*",
      "node_modules/**/*"
    ],
    "extraFiles": [
      {
        "from": "public",
        "to": ".",
        "filter": [
          "**/*"
        ]
      }
    ],
    "publish": [
      {
        "provider": "github",
        "owner": "my-github-username",
        "repo": "my-github-repo"
      }
    ]
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && electron-builder",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

在这个文件中，我们为应用程序添加了构建配置。请注意，“files”数组中包含我们的构建文件和第三方依赖项，而“extraFiles”数组中包含了public目录中的静态文件。