客户端开发（Electron）加入webpack

小鑫同学
1,941 阅读2分钟

「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」。

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；

image.png

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

image.png

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

image.png

  • 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')
  • 通过命令来启动项目看一下：

image.png

如何使用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"
    }
}

image.png​

如何加载静态资源？

  • 在static目录新增一个名为dict.json的文件；
  • 在渲染进程代码中增加如下内容：
// 必须添加，要不ts代码不识别__static
declare const __static: string;
// 主进程和渲染进程读取方式一致
const dicts = fs.readFileSync(path.join(__static, "dict.json"), "utf-8");
console.log("dicts :>> ", dicts);

image.png

如何打包我们的应用？

  • 先来安装一下用来打包的开发依赖吧，避免下载过慢，我们直接设置镜像安装：
npm i --save-dev electron-builder --registry=https://registry.npmmirror.com/
  • 配置"app:dir": "electron-builder --dir"命令，用来构建应用后直接输出而不生成安装文件；
  • 配置"app:dist": "electron-builder"命令，用来构建应用后输出安装文件用于分发；
  • 为了达到可分发的标准还需要配置一些其他信息，具体参照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,
      })
    );
}

总结：

     electron-webpack的使用初次并不顺畅，下载慢，编译报错等等，相关的资料也不多，还有长期不更新导致与现有的一些依赖脱节的问题，还有issues大量的遗留问题对于一个刚入门学习的我来说觉得并不友好，感觉坑不会少，需要慎用。

欢迎关注我的公众号“前端小鑫同学”，原创技术文章第一时间推送。

avatar
文章
阅读
粉丝