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模板实现方法
Apr 27 Javascript
javascript标签在页面中的位置探讨
Apr 11 Javascript
node.js中的http.createClient方法使用说明
Dec 15 Javascript
举例讲解Node.js中的Writable对象
Jul 29 Javascript
JavaScript 闭包详细介绍
Sep 28 Javascript
js中new一个对象的过程
Feb 20 Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
详解vue axios用post提交的数据格式
Aug 07 Javascript
使用angularjs.foreach时return的问题解决
Sep 30 Javascript
antd table按表格里的日期去排序操作
Nov 17 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
Mysql的常用命令
2006/10/09 PHP
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
php页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
laravel学习教程之关联模型
2016/07/30 PHP
php微信开发自定义菜单
2016/08/27 PHP
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
js实现股票实时刷新数据案例
2017/05/14 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
"火柴棍式"程序员面试题
2014/03/16 面试题
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
新闻专业毕业生求职信
2014/08/08 职场文书
离婚协议书范本样本
2014/08/19 职场文书
离婚案件原告代理词
2015/05/23 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
《检阅》教学反思
2016/02/22 职场文书
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript