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插件实现大图全屏图片相册
Mar 14 Javascript
JavaScript编程中window的location与history对象详解
Oct 26 Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 Javascript
layui select获取自定义属性方法
Aug 15 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
JavaScript指定断点操作实例教程
Sep 18 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 Javascript
jquery.pager.js分页实现详解
Jul 29 jQuery
微信小程序实现上传多张图片、删除图片
Jul 29 Javascript
基于Cesium绘制抛物弧线
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 curl的深入解析
2013/06/02 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
Display SQL Server Version Information
2007/06/21 Javascript
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
JS实现新建文件夹功能
2017/06/17 Javascript
详解vue-router 路由元信息
2017/09/13 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
vue组件中节流函数的失效的原因和解决方法
2020/12/02 Vue.js
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
[05:09]2016国际邀请赛中国区预选赛淘汰赛首日精彩回顾
2016/06/29 DOTA
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python用字典构建多级菜单功能
2019/07/11 Python
django的ORM操作 增加和查询
2019/07/26 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
教师年终个人自我评价
2013/10/04 职场文书
乡镇干部先进事迹材料
2014/02/03 职场文书
如何写求职信
2014/05/24 职场文书
党的作风建设心得体会
2014/10/22 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android
Java集成swagger文档组件
2021/06/28 Java/Android
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫
SpringBoot详解执行过程
2022/07/15 Java/Android