electron使用electron-packager打包整理

快来打我* 2022-02-20 01:53 1377阅读 1赞

一、安装 electron-packager

PS：安装之前，先复制一份package.json文件到./app目录下，然后改下./app目录下package.json里 “main”: “app/main.js”的路径（去掉app/），不这样子的话，下面打包的时候会报错，有的版本识别不了应用路径。

1、使用命令 npm install --save-dev electron-packager  
将electron-package包安装到在项目下面，  
  
安装完成之后，项目根目录下面的package.json文件里，会多出一条electron-package的版本号配置信息

二、正式打包

首先在项目根目录下面的 package.json 里添加代码，  
"packager": "electron-packager ./app HelloWorld -win=x32 --out ./OutApp --version 4.1.3 --overwrite --icon=./app/img/icon/icon.ico"

PS：这里要注意，字段里的 项目名字，version，icon路径要改成自己的；

然后，在使用命令 `npm run-script packager`

## 以上是`hello world`生成，真正用到已有的项目中却出现了新的坑 ##

1. jquery引用

在项目中已经引入了`jquery.js`，控制台却报`cannot find the jquery.js`，解决方法：在`index.html`中引入`jquery`改写成:

原因分析：因为nwjs/electron环境里有module jquery的loader认为是通过commonjs挂载的 所以他不会自动挂到全局 所以官方推荐自己来

2. 文件突然不能正常运行

原本好好地项目，一分钟之前还在完整的运行，没有改动任何一行代码，突然就无法运行，花了四个多小时找原因，结果还是没有找出来，只好把自己的项目拷贝到其他电脑上面运行，发现其他项目能够顺利运行可是在自己电脑上面不能运行，于是把电脑重启之后，项目又可以运行。  
原因分析：可能是操作系统中的资源出现了冲突，另外一个进程在使用某个资源，可是现在这个进程也要使用这项资源，所以导致的操作系统中的“堵塞？？？”。

3. `nodejs`的`require`不能在`angularjs`项目中运行

解决方法：在`index.html`的头部加上

原因分析： `angualrjs`内部有`require`指令，所以产生了命名冲突。

4. 修改服务器的`toml`配置文件

![Image 1][]

Paste\_Image.png

资源路径是相对于`exe`文件而言的，还没有打包之前，自己能够顺利的运行整个项目，可是打包之后一直提示

![Image 1][]

Paste\_Image.png

`ENOENT`: No such file or directory。提示找不到该文件，自己却一直以为是因为打包之后的`asar`包不能正常阅读所以耗费了大量时间，最后通过修改`toml`的路径参数解决问题。

5. `nodejs`打开路径

最初`require`不能在`angularjs`中正常运行，所以把所有参数在`main.js`中设置成全局变量，严重污染了全局空间，由于问题的解决，所以就在`angularjs`的`controller`里面顺理成章的使用`require`等API。

$scope.openTaskmgr = function () {
        //shell打开资源管理器
        var electronShell = __require("electron").shell;
        //path指定目录
        var electronPath = __require('path');
        var apkPath = electronPath.resolve(__dirname, '../../../../tmp/dist');
        electronShell.openExternal(apkPath);
    };

在这个项目里面，由于时间的关系，直接把需要打开的目录写死了，这种处理方法不是特别的好，最好的方法是去读取`toml`配置文件里面的路径，然后再打开相关链接。

6. 服务器日志输出

把项目打包之后读服务器日志就会成为一项比较难办的事情，所以在前端必须通过某个按钮打印出当前的服务器日志，这里运用到了`nodejs`的文件系统。

`main.js`里面打开服务器

var p = childProcess.spawn("resources/app/packerd.exe", ["--conf", "resources/app/packerd.toml"]);

获取服务器的**标准输出**和**标准错误输出**，并在**标准输出**中创建日志文件和写入相关日志，同时在**标准错误输出**中写入服务器错误日志

p.stdout.on('data', function (d) {
        //创建文件
        fs.open('resources/app/log.txt', 'w+', function(err, fd) {
            if (err) {
                return console.error(err);
            }
        });
    
        //写入服务器日志
        fs.appendFile('resources/app/log.txt', d.toString(),  function(err) {
            if (err) {
                return console.error(err);
            }
        });
    });
    
    p.stderr.on('data', function (data) {
        //写入服务器错误日志
        fs.appendFile('resources/app/log.txt', d.toString(),  function(err) {
            if (err) {
                return console.error(err);
            }
        });
    });

当`exe`关闭时删除服务器日志

app.on('window-all-closed', function () {
        if (process.platform !== 'darwin') {
            fs.unlink("resources/app/log.txt",function(err){
                if(err){
                    console.log(err);
                }
            });
            app.quit();
        }
    });

完成项目之后仔细想了想，为什么要创建`txt`文件而不能在`div`中输出相关内容，因为是给用户用的，我们不知道用户默认的打开`txt`的是什么软件，万一是一个非常非常慢的呢？在mac下又是什么呢？所以这样的用户体验性不是特别的好。同时在退出`exe`之后，自己究竟把资源清理干净了吗？这也是一个值得思考的问题。

[Image 1]: