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 attachEvent和addEventListener使用方法
Mar 19 Javascript
jqgrid 简单学习笔记
May 03 Javascript
namespace.js Javascript的命名空间库
Oct 11 Javascript
css值转换成数值请抛弃parseInt
Oct 24 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
Dec 29 Javascript
javascript对象的创建和访问
Mar 08 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
微信小程序之数据绑定原理解析
Aug 14 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 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
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
php实现字符串翻转的方法
2015/03/27 PHP
PHP7.0版本备注
2015/07/23 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
php使用 readfile() 函数设置文件大小大小的方法
2017/08/11 PHP
Prototype最新版(1.5 rc2)使用指南(1)
2007/01/10 Javascript
使用IE的地址栏来辅助调试Web页脚本
2007/03/08 Javascript
jquery操作select大全
2014/04/25 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
jQuery 动态云标签插件
2014/11/11 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
jquery拖拽排序简单实现方法(效果增强版)
2016/02/16 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
BootStrap中
2016/12/10 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
vue 封装面包屑组件教程
2020/11/16 Javascript
Python中数字以及算数运算符的相关使用
2015/10/12 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
python 读取.nii格式图像实例
2020/07/01 Python
对python中list的五种查找方法说明
2020/07/13 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
python判断元素是否存在的实例方法
2020/09/24 Python
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
巴西购物网站:Submarino
2020/01/19 全球购物
优秀护士演讲稿
2014/04/30 职场文书
Pillow图像处理库安装及使用
2022/04/12 Python
Python通用验证码识别OCR库ddddocr的安装使用教程
2022/07/07 Python