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

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


这里没有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.jsonmain属性指定入口。


创建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打包时才会将electronnode的一些功能打包进去,子进程才可以正常使用。


webpackelectron提供了三个可选的target属性值:electron-mainelectron-rendererelectron-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自带浏览器用于显示,以此让前端人员有可以进行桌面应用的开发。


目录
相关文章
|
1月前
|
缓存 监控
webpack 提高构建速度的方式
【10月更文挑战第23天】需要根据项目的具体情况和需求,综合运用这些方法,不断进行优化和改进,以达到最佳的构建速度和效果。同时,随着项目的发展和变化,还需要持续关注和调整构建速度的相关措施,以适应不断变化的需求。
|
1月前
|
存储 缓存 前端开发
利用 Webpack 5 的持久化缓存来提高构建效率
【10月更文挑战第23天】利用 Webpack 5 的持久化缓存是提高构建效率的有效手段。通过合理的配置和管理,我们可以充分发挥缓存的优势,为项目的构建和开发带来更大的便利和效率提升。你可以根据项目的实际情况,结合以上步骤和方法,进一步优化和完善利用持久化缓存的策略,以达到最佳的构建效果。同时,不断探索和实践新的方法和技术,以适应不断变化的前端开发环境和需求。
|
2月前
|
JavaScript API
使用vue3+vite+electron构建小项目介绍Electron进程间通信
使用vue3+vite+electron构建小项目介绍Electron进程间通信
366 3
|
2月前
|
开发框架 缓存 前端开发
electron-builder 解析:你了解其背后的构建原理吗?
本文首发于微信公众号“前端徐徐”,详细解析了 electron-builder 的工作原理。electron-builder 是一个专为整合前端项目与 Electron 应用的打包工具,负责管理依赖、生成配置文件及多平台构建。文章介绍了前端项目的构建流程、配置信息收集、依赖处理、asar 打包、附加资源准备、Electron 打包、代码签名、资源压缩、卸载程序生成、安装程序生成及最终安装包输出等环节。通过剖析 electron-builder 的原理,帮助开发者更好地理解和掌握跨端桌面应用的构建流程。
142 2
|
6月前
|
缓存 JavaScript 前端开发
探讨如何通过一系列优化策略来提升TypeScript与Webpack的构建性能。
【6月更文挑战第11天】本文探讨了优化TypeScript与Webpack构建性能的策略。理解Webpack的解析、构建和生成阶段是关键。优化包括:调整tsconfig.json(如关闭不必要的类型检查)和webpack.config.js选项,启用Webpack缓存,实现增量构建,代码拆分和懒加载。通过这些方法,可以提升构建速度,提高开发效率。
80 0
|
2月前
|
开发框架 JavaScript 前端开发
Electron技术深度解析:构建跨平台桌面应用的利器
【10月更文挑战第13天】Electron技术深度解析:构建跨平台桌面应用的利器
192 0
|
4月前
|
JavaScript 开发工具 git
Electron V8排查问题之构建时报错 "user32.lib is not found in LIB"如何解决
Electron V8排查问题之构建时报错 "user32.lib is not found in LIB"如何解决
45 1
|
4月前
|
前端开发 JavaScript C++
【绝技大公开】Webpack VS Rollup:一场前端工程化领域的巅峰对决,谁能笑到最后?——揭秘两大构建神器背后的秘密与奇迹!
【8月更文挑战第12天】随着前端技术的发展,模块化与自动化构建成为标准实践。Webpack与Rollup作为主流构建工具,各具特色。Webpack是一款全能型打包器,能处理多种静态资源,配置灵活,适合复杂项目;Rollup专注于ES6模块打包,利用Tree Shaking技术减少冗余,生成更精简的代码。Rollup构建速度快,配置简洁,而Webpack则拥有更丰富的插件生态系统。选择合适的工具需根据项目需求和个人偏好决定。两者都能有效提升前端工程化水平,助力高质量应用开发。
45 1
|
4月前
|
容器 iOS开发 Linux
震惊!Uno Platform 响应式 UI 构建秘籍大公开!从布局容器到自适应设计,带你轻松打造跨平台完美界面
【8月更文挑战第31天】Uno Platform 是一款强大的跨平台应用开发框架,支持 Web、桌面(Windows、macOS、Linux)及移动(iOS、Android)等平台,仅需单一代码库。本文分享了四个构建响应式用户界面的最佳实践:利用布局容器(如 Grid)适配不同屏幕尺寸;采用自适应布局调整 UI;使用媒体查询定制样式;遵循响应式设计原则确保 UI 元素自适应调整。通过这些方法,开发者可以为用户提供一致且优秀的多设备体验。
165 0
|
4月前
|
前端开发 JavaScript API
强强联手打造桌面应用新标杆:Angular与Electron的完美融合——从环境搭建到通信机制,全面解析构建跨平台应用的最佳实践与技巧
【8月更文挑战第31天】随着Web技术的进步,开发者们越来越多地采用Web技术来构建桌面应用程序。通过结合使用开源框架Electron及前沿的前端框架Angular,开发者能充分利用JavaScript、HTML和CSS打造出高性能且易维护的跨平台桌面应用。本文将详细介绍如何搭建基于Angular与Electron的开发环境,包括创建Angular项目、安装Electron及相关依赖、配置Electron主进程以及实现Angular应用与Electron间的通信等关键步骤,并最终将应用打包成多平台可执行文件,为读者提供了一套完整的解决方案以快速入门并实践这一强大技术组合。
125 0