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+CSS 半开折叠效果原理及代码(自写)
Mar 04 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
JavaScript实现网页截图功能
Oct 16 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
React-Native做一个文本输入框组件的实现代码
Aug 10 Javascript
jquery实现企业定位式导航效果
Jan 01 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 Javascript
Javascript var变量删除原理及实现
Aug 26 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读取目录及子目录下所有文件名的方法
2014/10/20 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
解决Yii2邮件发送结果返回成功,但接收不到邮件的问题
2017/05/23 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
封装好的一个万能检测表单的方法
2015/01/21 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
JS中type="button"和type="submit"的区别
2017/07/04 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
js通过Date对象实现倒计时动画效果
2017/10/27 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
监控微信小程序中的慢HTTP请求过程详解
2019/07/05 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
浅析Python中的多条件排序实现
2016/06/07 Python
Python实现多线程HTTP下载器示例
2017/02/11 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
python求numpy中array按列非零元素的平均值案例
2020/06/08 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
面试后感谢信怎么写
2014/02/01 职场文书
机电一体化毕业生自荐信
2014/06/19 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
2014年组织部工作总结
2014/11/14 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang