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 相关文章推荐
50款非常棒的 jQuery 插件分享
Mar 29 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
js实现继承的5种方式
Dec 01 Javascript
谈一谈javascript闭包
Jan 28 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
May 31 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
一些可能会用到的Node.js面试题
Jun 15 Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 Javascript
layui 表格操作列按钮动态显示的实现方法
Sep 06 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
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
PHP Memcached应用实现代码
2010/02/08 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
jquery $.ajax入门应用二
2008/11/19 Javascript
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
Python 由字符串函数名得到对应的函数(实例讲解)
2017/08/10 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
python写入已存在的excel数据实例
2018/05/03 Python
python中for用来遍历range函数的方法
2018/06/08 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
Selenium结合BeautifulSoup4编写简单的python爬虫
2020/11/06 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
婚育证明格式
2015/06/17 职场文书
SQL实现LeetCode(196.删除重复邮箱)
2021/08/07 MySQL
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技