electron 如何将任意资源打包的方法步骤


Posted in Javascript onApril 16, 2020

如何打包资源

只想写个图形小工具,本质上还是调用写好的 java 程序,因为我觉得在命令行里面来回切目录,复制路径等操作实在是太麻烦了。

那么我现在已经搞定了如何从 electron 的 js 事件里获得文件路径,我也搞定了如何在 electron 的 main.js 里面创建新的进程执行指令,那么如何使用到打包好的 jar 包或者其他资源呢?

直接看下 packages.json 里面吧。

{
 "name": "....",
 "version": "1.0.0",
 "description": "",
 "main": "main.js",
 "scripts": {
  "start": "export FAVOR=debug && electron .",
  "pack": "electron-packager ./ yourAppName --platform=darwin --arch=x64 --app-version=0.0.1 --app-bundle-id=com.xxxx.yourAppName --out=build --overwrite --extra-resource='./extraResources'"
 },
 "build": {
  "extraResources": [
   "./extraResources/**"
  ]
 },
 
}

需要注意的是 build 里面加了一个 extraResources,另外,通过 electron-packager 打包的参数里面也加上一个 --extra-resource='./extraResources'

然后打包的时候就可以把你想要的任何文件打包进去了,jar 也好,python 脚本也好。

如何引用资源

需要注意的是,debug 运行和 release 运行是不一样的,这里,我们就需要一个东西来在运行时区分,我现在是 debug 还是 release。

注意上面的 json 脚本中,有一个 export FAVOR=debug,这个相当于在 debug 运行的时候加入了一个环境变量。

怎么读取环境变量呢?在 main.js 里面这样读取:

console.log("favor: " + process.env.FAVOR)

接下来就是区分运行时来获取资源路径了。

function getResPath() {
 if (isDebug) {
  return "./extraResources"
 } else {
  return process.resourcesPath + "/extraResources"
 }
}

仅此记录一下,给可能需要的人。

electron打包的一些坑

我们知道使用electron打包的时候设置asar为true,electron-builder会智能的把一些native的程序不打包到app.asar里面,但是我碰到一个很奇怪的问题,周五的时候需要使用语音的格式转换,用到了amrToMp3和ffmpeg-static这两个库,其中amrToMp3的主要代码:

const exec = require('child_process').exec
const path = require('path')
const ffmpeg = require('ffmpeg-static')
const ffmpegPath = ffmpeg.path
function amrToMp3(filepath, outputDir = './src/mp3') {
 return new Promise((resolve, reject) => {
  const basename = path.basename(filepath)
  const filename = basename.split('.')[0]
  const etc = basename.split('.')[1]
  if (etc != 'amr') {
   console.log('please input a amr file')
   return
  }
  const cmdStr = `${ffmpegPath} -y -i ${filepath} ${outputDir}/${filename}.mp3`
  exec(cmdStr, (err, stdout, stderr) => {
   if (err) {
    console.log('error:' + stderr)
    reject('error:' + stderr)
   } else {
    resolve(`${outputDir}/${filename}.mp3`)
    console.log(`transform to mp3 success! ${filepath}->${outputDir}/${filename}.mp3`)
   }
  })
 })
}

其中用到了exec这个命令,ffmpegPath打包后基本是****/app.asar/src/node_modules/ffmpeg-static/bin/darwin/x64/ffmpeg,但是打包后运行提示了can not found ****/app.asar/src/node_modules/ffmpeg-static/bin/darwin/x64/ffmpeg 很尴尬,但是我去解压了,明明是存在的,后来我去看了类似的一个库node-notifier,发现用的是execFile这个命令,然后我修改了一下,结果。。。。居然就可以了。这个地方谁知道原因,求解答。。。。

修改之后的程序代码:

var ffmpegPath = path.join(
 __dirname,
 'bin',
 platform,
 arch,
 platform === 'win32' ? 'ffmpeg.exe' : 'ffmpeg'
)

execFile(ffmpegPath, ['-y', '-i', inputPath, cmdStr], function (err, stdout, stderr) {
 if (err) {
  console.log('error:' + stderr);
  reject('error:' + stderr);
 } else {
  resolve(outputDir + '/' + filename + '.mp3');
  console.log('transform to mp3 success! ' + filepath + '->' + outputDir + '/' + filename + '.mp3');
 }
});

到此这篇关于electron 如何将任意资源打包的方法步骤的文章就介绍到这了,更多相关electron 任意资源打包 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery下操作HTML控件的实现代码
Jan 12 Javascript
基于Jquery与WebMethod投票功能实现代码
Jan 19 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
AngularJS 作用域详解及示例代码
Aug 17 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
vue实现2048小游戏功能思路详解
May 09 Javascript
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
微信小程序实现收货地址左滑删除
Nov 18 Javascript
vue中keep-alive内置组件缓存的实例代码
Apr 16 #Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 #Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 #Javascript
vue下canvas裁剪图片实例讲解
Apr 16 #Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 #Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 #Javascript
Vue Object 的变化侦测实现代码
Apr 15 #Javascript
You might like
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
php实现ip白名单黑名单功能
2015/03/12 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
PHP 的Opcache加速的使用方法
2017/12/29 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
jQueryMobile之Helloworld与页面切换的方法
2015/02/04 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
2016/02/23 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
2018/08/14 jQuery
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
Django返回json数据用法示例
2016/09/18 Python
Python的numpy库中将矩阵转换为列表等函数的方法
2018/04/04 Python
详解Python学习之安装pandas
2019/04/16 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
Python定时从Mysql提取数据存入Redis的实现
2020/05/03 Python
Python 忽略文件名编码的方法
2020/08/01 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
什么叫应用程序域?什么是托管代码?什么是强类型系统?什么是装箱和拆箱?什么是重载?CTS、CLS和CLR分别作何解释?
2012/05/23 面试题
护士岗前培训自我评鉴
2014/02/28 职场文书
建筑工程造价专业自荐信
2014/07/08 职场文书
同志主要表现材料
2014/08/21 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
2014年驾驶员工作总结
2014/11/18 职场文书
党员证明模板
2015/06/19 职场文书