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 函数的执行环境和作用域链的深入解析
Nov 01 Javascript
javascript options属性集合操作代码
Dec 28 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 Javascript
JavaScript插入动态样式实现代码
Feb 22 Javascript
javascript工具库代码
Mar 29 Javascript
js添加绑定事件的方法
May 15 Javascript
三种带箭头提示框总结实例
Jun 14 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
vue.js,ajax渲染页面的实例
Feb 11 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 Javascript
JavaScript中的函数式编程详解
Aug 22 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 反向排序和随机排序代码
2010/06/30 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
javascript html 静态页面传参数
2009/04/10 Javascript
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
jquery垂直公告滚动实现代码
2013/12/08 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
js中Generator函数的深入讲解
2019/04/07 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
python中bisect模块用法实例
2014/09/25 Python
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
施华洛世奇意大利官网:SWAROVSKI意大利
2018/07/23 全球购物
渗透攻击的测试步骤
2014/06/07 面试题
军训口号
2014/06/13 职场文书
法制宣传标语
2014/06/23 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
2014年预算员工作总结
2014/12/05 职场文书
2014年底工作总结
2014/12/15 职场文书
北京英文导游词
2015/02/12 职场文书
网络管理员岗位职责
2015/02/12 职场文书
餐饮服务食品安全承诺书
2015/04/29 职场文书