客户端开发（Electron）加入webpack

  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"命令，用来构建应用后输出安装文件用于分发；
• 为了达到可分发的标准还需要配置一些其他信息，具体参照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大量的遗留问题对于一个刚入门学习的我来说觉得并不友好，感觉坑不会少，需要慎用。