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 相关文章推荐
一段效率很高的for循环语句使用方法
Aug 13 Javascript
Javascript 遍历对象中的子对象
Jul 03 Javascript
js 使用form表单select类实现级联菜单效果
Dec 19 Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 Javascript
AngularJs  Understanding Angular Templates
Sep 02 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
Sep 05 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
原生js实现键盘控制div移动且解决停顿问题
Dec 05 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 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中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
JavaScript 数组详解
2013/10/10 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
2017/05/02 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
python基础教程之类class定义使用方法
2014/02/20 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
python开头的coding设置方法
2019/08/08 Python
Python编写打字训练小程序
2019/09/26 Python
python带参数打包exe及调用方式
2019/12/21 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
高中政治教学反思
2014/01/18 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
原告代理词范文
2015/05/25 职场文书
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python
vue使用echarts实现折线图
2022/03/21 Vue.js
python开发人人对战的五子棋小游戏
2022/05/02 Python