这里没有
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
自带浏览器用于显示,以此让前端人员有可以进行桌面应用的开发。