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中使用inline函数的问题
Mar 08 Javascript
一组JS创建和操作表格的函数集合
May 07 Javascript
javascript天然的迭代器
Oct 29 Javascript
jQuery随机切换图片的小例子
Apr 18 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
移动端点击态处理的三种实现方式
Jan 12 Javascript
canvas绘制环形进度条
Feb 23 Javascript
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
详解React服务端渲染从入门到精通
Mar 28 Javascript
vue实现评价星星功能
Jun 30 Javascript
js中Map和Set的用法及区别实例详解
Feb 15 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+AJAX实现投票功能的方法
2015/09/28 PHP
PHP简单的MVC框架实现方法
2015/12/01 PHP
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
jQuery版Tab标签切换
2011/03/16 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
2013/12/27 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
Javascript基础教程之数组 array
2015/01/18 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
在Vue项目中使用d3.js的实例代码
2018/05/01 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
python清除字符串里非数字字符的方法
2015/07/02 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
python同步两个文件夹下的内容
2019/08/29 Python
python 实现多线程下载视频的代码
2019/11/15 Python
台湾森森购物网:U-mall
2017/10/16 全球购物
校园之星获奖感言
2014/01/29 职场文书
公司会议策划方案
2014/05/17 职场文书
会计求职自荐信
2015/03/26 职场文书
投标单位介绍信
2015/05/05 职场文书
南京大屠杀观后感
2015/06/02 职场文书
信息技术课教学反思
2016/02/23 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
详解如何使用Nginx解决跨域问题
2022/05/06 Servers