electron外部插件打包

面临问题

当需要在electron中引入外部插件(如Pepper Flash Plugin)时,打包生成.asar文件后会导致程序不能引用外部插件,从而不能执行插件对应功能.

解决方案

我们需要在打包asar文件时配置unpack选项,在打包时不打包插件目录.下面将以electron-packager为例,说明具体配置.

配置electron-packager

我们需要在electron-packager配置文件中新增asar配置:

asar:{  
    unpackDir:'plugins'
}

unpackDir定义了我们无需打包的目录,下面是官方提供的几种常见配置:

asar.unpackDir = 'sub_dir' 会不打包 /<dir>/sub_dir 目录及子目录文件
asar.unpackDir = '**/{sub_dir1/sub_sub_dir,sub_dir2}/*' 会不打包/<dir>/sub_dir1/sub_sub_dir 和 /<dir>/sub_dir2 目录文件,但不包括子目录.
asar.unpackDir = '**/{sub_dir1/sub_sub_dir,sub_dir2}/**' 会不打包 /<dir>/sub_dir1/sub_sub_dir 和 /<dir>/sub_dir2 目录及子目录文件.
asar.unpackDir = '**/{sub_dir1/sub_sub_dir,sub_dir2}/**/*' 会不打包 /<dir>/sub_dir1/sub_sub_dir 和 /<dir>/sub_dir2 ,包含它们的子目录.

配置开发环境

当配置了插件不打包后,插件对应的目录结构也会进行变更.建议在开发时增加--develop启动项,在package.json中修改script配置:

"scripts": {
    "start": "electron . --develop",
    "dev": "electron .  --develop --debug"
}

在main.js中增加develop判断:

const develop = /--develop/.test(process.argv[2]);  
let asarDir = '../app.asar.unpacked';  
//设置asar开发配置
if(develop){  
    asarDir = '.';
}

let flashPlugin = ''; //flash插件地址  
let flashVersion = ''; //flash版本

switch (process.platform) {  
    case 'win32':
        switch(process.arch){
            case 'x64':
                flashPlugin=asarDir+'/plugins/flash/win/x64/pepflashplayer.dll';
                flashVersion='24.0.0.186';
                break;
            case 'ia32':
                flashPlugin=asarDir+'/plugins/flash/win/x86/pepflashplayer.dll';
                flashVersion='24.0.0.186';
                break;
        }
        break;
}

if(flashPlugin){  
    app.commandLine.appendSwitch('ppapi-flash-path', path.join(__dirname, flashPlugin));
    app.commandLine.appendSwitch('ppapi-flash-version', flashVersion);
}

这样,我们在开发时就会使用常规文件地址,而打包后将会使用非打包的地址.

Menu