原创从零开始搭建Electron+Vue+Webpack项目框架预加载和Electron自动更新

Posted 2020-11-28 罗知晏

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原创从零开始搭建Electron+Vue+Webpack项目框架预加载和Electron自动更新相关的知识，希望对你有一定的参考价值。

导航：

（一）Electron跑起来
 （二）从零搭建Vue全家桶+webpack项目框架
 （三）Electron+Vue+Webpack，联合调试整个项目
 （四）Electron配置润色
 （五）预加载及自动更新
 （六）构建、发布整个项目（包括client和web）

摘要：到目前为止，我们的项目已经具备了PC客户端该有的一些基础功能和调试环境，但是总感觉缺了灵魂，那就是结合实际项目、实际业务的细节处理，缺着吧。。。这篇文章就介绍一下预加载和自动更新，文字功底有限，如有介绍的不清楚的地方，欢迎留言指正，或者跳过文字，直接去看代码，项目完整代码：https://github.com/luohao8023/electron-vue-template，随博客更新。

一、预加载

1、什么是预加载？什么场景能用到？　

preload String (可选) -在页面运行其他脚本之前预先加载指定的脚本 无论页面是否集成Node, 此脚本都可以访问所有Node API 脚本路径为文件的绝对路径。 当 node integration 关闭时, 预加载的脚本将从全局范围重新引入node的全局引用标志。

摘自electron官网的一段介绍，https://www.electronjs.org/docs/api/browser-window。

preload是BrowserWindow类的参数webPreferences的一个可选配置项，我们解读一下官网的介绍：

在页面运行其他脚本之前预先加载的指定的脚本：首先是个js文件没错了，再看加载时机，在页面运行其他脚本之前预先加载，这个页面不是普通的某个h5页面，而是指某个渲染进程（需要预加载js的渲染进程，因为渲染进程可能有多个，每个就是一个窗口），我们new一个BrowserWindow，打开了一个窗口，就是启动了一个渲染进程，如果我们不给这个窗口指定页面，那它就是空白的，如果指定了页面，那么窗口就会加载这个页面：

    const win = new BrowserWindow({
        width: 800,
        height: 600
    });
    win.loadURL(\'https://www.baidu.com\');

如上面代码，我们创建了一个窗口，然后加载百度首页，而preload脚本的加载时机就是窗口创建后，百度首页加载之前。如果有人问，如果不调用loadURL方法，不加载页面，preload脚本会加载吗？答案是会，但有什么用呢？你起个壳子不给人家看页面是什么鬼？不管这些，重要的是我们理解这个加载时机就好了；

无论页面是否集成Node，此脚本都可以访问所有Node API：首先要说明的一点是，Electron5.x以上版本，默认无法在渲染进程中访问Node API，如需使用，需要预先配置：

    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });

然后还要清楚一点，preload脚本是运行在渲染进程中的，可以仔细考虑一下。再有一点就是，preload脚本中可以访问window对象（渲染进程其实就是起了个浏览器壳子），preload脚本运行在渲染进程，提前于页面和其他所有js的加载，又能访问Node API；

脚本文件路径为绝对路径，当node integration关闭时，预加载的脚本将从全局范围重新引入node的全局引用标志：结合前面两点理解就好了。

那么，到底什么是预加载？用白话定义一下：

某一个渲染进程，在页面加载之前加载一个本地脚本，这个脚本能访问所有Node API、能访问window对象。用法如下：

    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: path.join(__dirname, \'preload.js\')
        }
    });

理解应该差不多了，但什么场景能用到这玩意儿呢？按正常的逻辑来想，主进程启动后启动渲染进程，渲染进程加载页面就完事儿了，哪会用到这个preolad呢？

想一下，如果我们有以下场景：

a、如果我们启动了一个窗口（渲染进程），加载了一个线上的页面，本地没有页面文件，但要做一些错误处理，比如网络错误，页面加载失败，然后在页面空白但时候插入一些元素；

b、如果我们的一套代码部署在web端和客户端，需要用一个变量判断是在web端还是客户端；

...........

感觉举的例子好勉强啊，不要见怪，就是大概这么个意思，没准哪天就遇到了非preload解决不了的问题呢，毕竟这玩意儿还是有它的特殊之处的；

上面两个场景如果用preload来解决的话，思路是利用prelaod中能访问window对象的特点，比如b，代码中可以用window.isClient来判断是否在客户端，默认为false，然后在preload中把window.isClient设置为true，而对于部署在web端的代码来说，这个值就是false。

2、怎么用？

上面说了怎么引用preload脚本，现在说一下怎么写，下面开始xxoo乱写乱画了：

// 访问electron对象
const {
    remote,
    ipcRenderer
} = require(\'electron\');
// 访问node模块
const fs = require(\'fs\');
const path = require(\'path\');
// 访问window对象
window.isClient = true;
window.sayHello = function() {
    console.log(\'hello\');
};
// 操作dom
const div = document.createElement(\'div\');
div.innerText = \'I am a div\';
document.body.appendChild(div);
// ...

如果preoad里面逻辑比较复杂，有可能还要用webpack打包一下，单独拎出来打包就行了，webpack单文件打包，注意targer要"electron-renderer"：

/*
Tip:  preload 打包配置
 */
const path=require(\'path\');
const { dependencies } = require(\'../package.json\');
module.exports = {
    mode:process.env.NODE_ENV,
    entry: {
        preload:[\'./src/preload/index.js\']
    },
    output: {
        path: path.join(__dirname, \'../app/\'),
        libraryTarget: \'commonjs2\',
        filename: \'./[name].js\'
    },
    optimization: {
        runtimeChunk: false,
        minimize: true
    },
    node: {
        fs: \'empty\',
        __dirname:false
    },
    module: {
        rules: [
            {
                test: /\\.js$/,
                loader: \'babel-loader\',
                exclude: /node_modules/
            }
        ]
    },
    externals: [
        ...Object.keys(dependencies || {})
    ],
    resolve: {
        extensions: [\'.js\'],
        alias: {
            \'@\': path.resolve(__dirname, "../src"),
            \'@public\': path.resolve(__dirname, "../public")
        }
    },
    plugins:[],
    target:"electron-renderer"
}