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 的 prototype问题。
Jan 03 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 Javascript
jquery表单提交带错误信息提示效果
Mar 09 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
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
我的论坛源代码(十)
2006/10/09 PHP
WHOIS类的修改版
2006/10/09 PHP
js下函数般调用正则的方法附代码
2008/06/22 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
PHP asXML()函数讲解
2019/02/03 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
javascript实现粘贴qq截图功能(clipboardData)
2016/05/29 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
JavaScript事件对象event用法分析
2018/07/27 Javascript
vue实现文件上传功能
2018/08/13 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
Python实现Linux中的du命令
2017/06/12 Python
Sanic框架安装与简单入门示例
2018/07/16 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
Virtualenv 搭建 Py项目运行环境的教程详解
2020/06/22 Python
HTML5 Canvas实现放大镜效果示例
2020/03/25 HTML / CSS
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
ANINE BING官方网站:奢华的衣橱基本款和时尚永恒的单品
2019/11/26 全球购物
中层竞聘演讲稿
2014/01/09 职场文书
高中生期末评语大全
2014/01/28 职场文书
小学信息技术教学反思
2014/02/10 职场文书
火车来了教学反思
2014/02/11 职场文书
司机工作自我鉴定
2014/09/19 职场文书
优秀教师个人材料
2014/12/15 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
毕业论文答辩开场白
2015/05/27 职场文书