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 相关文章推荐
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
Dec 16 Javascript
bootstrap data与jquery .data
Jul 07 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
bootstrap导航栏、下拉菜单、表单的简单应用实例解析
Jan 06 Javascript
jQuery+CSS3实现点赞功能
Mar 13 Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 Javascript
vue+swiper实现侧滑菜单效果
Dec 28 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
Mar 03 Javascript
详解JQuery基础动画操作
Apr 12 jQuery
vue模仿网易云音乐的单页面应用
Apr 24 Javascript
浅谈vue权限管理实现及流程
Apr 23 Javascript
JavaScript cookie原理及使用实例
May 08 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算开始时间到过期时间的相隔的天数
2011/01/12 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
微信小程序 网络API发起请求详解
2016/11/09 Javascript
Node.js使用gm拼装sprite图片
2017/07/04 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
Angular处理未可知异常错误的方法详解
2021/01/17 Javascript
python将ip地址转换成整数的方法
2015/03/17 Python
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
python 模拟登陆163邮箱
2020/12/15 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
美国在线咖啡、茶和餐厅供应商:LollicupStore
2018/05/04 全球购物
启动一个线程是用run()还是start()
2016/12/25 面试题
函授本科毕业生自我鉴定
2013/10/16 职场文书
高中生的学习总结自我鉴定
2013/10/26 职场文书
师范院校学生自荐信范文
2013/12/27 职场文书
2014年关工委工作总结
2014/11/17 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
通知范文怎么写
2015/04/16 职场文书
2019广播稿怎么写
2019/04/17 职场文书