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 相关文章推荐
写给想学习Javascript的朋友一点学习经验小结
Nov 23 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
Apr 07 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
self.attachevent is not a function的解决方法
Apr 04 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
es6 for循环中let和var区别详解
Jan 12 Javascript
TypeScript 内置高级类型编程示例
Sep 23 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
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
用libTemplate实现静态网页的生成
2006/10/09 PHP
php 文件缓存函数
2011/10/08 PHP
php数组去重的函数代码
2013/02/03 PHP
PHP写的资源下载防盗链类分享
2014/05/12 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
PHP实现简易blog的制作
2016/10/24 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
append和appendTo的区别以及appendChild用法
2013/12/24 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
2017/10/13 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
Python字符串的一些操作方法总结
2019/06/10 Python
python自动发微信监控报警
2019/09/06 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
会计专业自我评价
2014/02/12 职场文书
三年级小学生评语
2014/04/22 职场文书
幼儿教师师德演讲稿
2014/05/06 职场文书
2015年宣传工作总结
2015/04/08 职场文书
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python
P站美图推荐——变身女主角特辑
2022/03/20 日漫
python3 字符串str和bytes相互转换
2022/03/23 Python