客户端开发（Electron）加入webpack

前端小鑫同学

发布于 2022-12-26 09:59:59

1.2K0

发布于 2022-12-26 09:59:59

Dear，大家好，我是“前端小鑫同学”，😇长期从事前端开发，安卓开发，热衷技术，在编程路上越走越远～

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

本篇说明：

今天我们将在前端开发中最为常见webpack加入到Electron中，因为GUI引用不同于传统的Web前端项目，所以webpack的配置会相对繁琐，这里我们主要用到了electron-webpack，但是要说明的是，这个项目因作者时间不够充足已经有挺长时间没有更新了，同时在也寻找一起维护的作者，所以今天的案例一定要注意所安装依赖的版本。

开始前的准备：

初始化项目：mkdir electron-webpack-demo && cd .\electron-webpack-demo && npm init；

安装开发依赖：yarn add electron-webpack electron webpack@4 --dev，目前不支持webpack5；
安装其他依赖：yarn add source-map-support
配置dev命令：{ "dev": "electron-webpack dev" }
按下图组织目录结构（可通过配置调整）：

主进程代码示例：如下
- 主要的变化在创建窗口中，webPreferences属性中需要开启nodeIntegration，并同时禁用掉contextIsolation，否则你会发现如下报错信息；

loadFile变成了loadURL，启动的端口我们通过环境变量来读取。

const { app, BrowserWindow } = require("electron");

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences:{
        nodeIntegration:true,
        contextIsolation: false
    }
  });
  const url = `http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`;
  mainWindow.loadURL(url);
}

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

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

复制代码

渲染进程代码示例：
- 为了让我们的页面出现点内容已证明项目成功的运行；

document.write('hello electron webpack')
复制代码

通过命令来启动项目看一下：

如何使用TypeScript？

安装开发依赖：yarn add typescript electron-webpack-ts --dev；

在项目根目录配置tsconfig.json；

{
  "extends": "./node_modules/electron-webpack/tsconfig-base.json"
}
复制代码

我们改造渲染进程代码来验证ts文件可以被正常解析。

// index.ts
class WriterContent {
  write(content: string) {
    document.write(content);
  }
}

new WriterContent().write("hello electron webpack");
复制代码

如何自定义入口页面？

目前我们启动项目后一直都使用的是由插件提供的默认页面，我们也可以配置一份自定义的入口页面。

增加配置到package.json，并新增页面到配置的目录；

"electronWebpack": {
    "renderer": {
      "template": "src/renderer/index.html"
    }
}

如何加载静态资源？

在static目录新增一个名为dict.json的文件；

在渲染进程代码中增加如下内容：

// 必须添加，要不ts代码不识别__static
declare const __static: string;
// 主进程和渲染进程读取方式一致
const dicts = fs.readFileSync(path.join(__static, "dict.json"), "utf-8");
console.log("dicts :>> ", dicts);

如何打包我们的应用？

先来安装一下用来打包的开发依赖吧，避免下载过慢，我们直接设置镜像安装：

npm i --save-dev electron-builder --registry=https://registry.npmmirror.com/

配置"app:dir": "electron-builder --dir"命令，用来构建应用后直接输出而不生成安装文件；

配置"app:dist": "electron-builder"命令，用来构建应用后输出安装文件用于分发；

为了达到可分发的标准还需要配置一些其他信息，具体参照https://www.electron.build/来配置。

到此我们的执行命令后生成的文件打开得到的是白屏的状态，我们需要做最后一步处理，调整正式模式下的loadURL：

if (process.env.NODE_ENV !== "production") {
  const url = `http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`;
  mainWindow.loadURL(url);
} else {
  mainWindow.loadURL(
    format({
      pathname: path.join(__dirname, "index.html"),
      protocol: "file",
      slashes: true,
    })
  );
}