《Webpack5 核心原理与应用实践》学习笔记-> 构建Electron

田八
VIP.5 如鱼得水
469 阅读3分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情

这里没有pwa的笔记，因为对着它上面的代码敲，结果居然 失 败 了 ~，所以就不做笔记了，后面有时间单独找时间去学习，至于node确实没必要使用webpack去构建。
然后对着构建Electron居然也失败了，就自己去查了Electron的一些相关资料，然后我感觉我这已经不能再叫学习笔记了。

目录结构

├─ public
│ ├─ index.html
├─ src 
│ ├─ App.vue  // vue 项目入口页面
│ ├─ main.js  // vue 项目入口
├─ main.js   // Electron 的入口文件
├─ package.json 
├─ webpack.config.js // 子进程 webpack 配置

创建Electron主进程

Electron是分为主进程和子进程两个进程的，在运行Electron应用时，将从一个入口js文件开始，这个入口js文件就是根目录下的main.js文件，内容如下：

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

// 应用启动后
app.whenReady().then(() => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: { // 在 Electron 13+ 后，需要配置该属性
            nodeIntegration: true,
            contextIsolation: false,
        }
    });

    win.loadURL("http://localhost:8080");
});

Electron主进程的入口就是这么简单，接下来就直接npm i -D electron安装就好了。

友情提示：Electron安装会被墙，所以推荐使用cnpm，或者添加环境变量ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/" ELECTRON_CUSTOM_DIR="{{ version }}" npm i -D electron
这里我为什么还推荐cnpm而不是pnpm，因为我不会pnpm,cnpm安装也很简单
npm i -g cnpm--registry=https://registry.npm.taobao.org
以后如果还有什么被墙的也可以直接使用，就是把npm替换成cnpm就好了。

安装完成之后，直接命令行electron ./main.js就可以看到弹出了一个白板的页面。

上面的命令不能在Windows PowerShell中执行，可以将该命令封装到package.json中执行。 electron .是快捷命令，但是需要在package.json的main属性指定入口。

创建Electron子进程

上面的目录结构除了根目录下的main.js是和electron相关的，其他的都和electron关系不大，上面如果将根目录下的main.js文件去掉，妥妥的就是一个vue项目，不多说废话，直接看代码：

  • index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
  • src/main.js
import {createApp} from 'vue'
import App from './App.vue';

const app = createApp(App);
app.mount('#app')
  • src/App.vue
<template>
  <h1>App...</h1>
</template>
  • webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
    mode: "development",
    entry: "./src/main.js",
    // target 需要指定为 electron-renderer
    target: "electron-renderer",
    module: {
        rules: [
            {
                test: /.vue$/,
                use: {
                    loader: "vue-loader"
                },
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        }),
        new VueLoaderPlugin()
    ],
    devServer: {
        hot: true
    },
}

注意上面的webpack配置，指定了一个target属性，值为electron-renderer，这样webpack打包时才会将electron和node的一些功能打包进去，子进程才可以正常使用。

webpack为electron提供了三个可选的target属性值：electron-main、electron-renderer、electron-preload，详细参考：target

这里三个值只使用了一个，因为他们的效果是类似的，都是将electron的功能编译进目标文件，electron-main是编译主进程的，实测这种demo没必要使用。

运行

上面的搭建完成之后，启动主进程electron ./main.js，启动子进程npx webpack server，就可以看到效果了，然后再将命令封装一下，完整的package.json如下:

{
  "name": "webpack-electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "electron .",
    "dev": "npx webpack server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^20.0.2",
    "html-webpack-plugin": "^5.5.0",
    "vue-loader": "^17.0.0",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.10.0"
  },
  "dependencies": {
    "vue": "^3.2.37"
  }
}

总结

electron就是一个套件浏览器，同时开发electron有点类似微前端，所以可以跨语言开发，webpack提供的只是将各种语言编译成为让浏览器可以识别的结果，然后electron自带浏览器用于显示，以此让前端人员有可以进行桌面应用的开发。

avatar
文章
阅读
粉丝