electron 如何将任意资源打包的方法步骤

 更新时间:2020年04月16日 11:27:40   作者:kross  
这篇文章主要介绍了electron 如何将任意资源打包的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

如何打包资源

只想写个图形小工具,本质上还是调用写好的 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 任意资源打包 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 支付宝小程序实现类似微信多行输入功能(思路详解)

    支付宝小程序实现类似微信多行输入功能(思路详解)

    这篇文章主要介绍了支付宝小程序实现类似微信多行输入功能,输入超过 8 行的时候会出现滚动,这样做的好处就是输入框不会直接顶到页面最顶部,支付宝小程序实现多行输入框:使用textarea多行输入框实现,感兴趣的朋友一起看看吧
    2024-02-02
  • ES6基础之数组和对象的拓展实例详解

    ES6基础之数组和对象的拓展实例详解

    这篇文章主要介绍了ES6基础之数组和对象的拓展,结合实例形式详细分析了ES6数组和对象拓展运算符、拓展方法的使用及相关操作技巧,需要的朋友可以参考下
    2019-08-08
  • bootstrap table实现横向合并与纵向合并

    bootstrap table实现横向合并与纵向合并

    这篇文章主要为大家详细介绍了bootstrap table实现横向合并与纵向合并,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 基于javascript实现根据身份证号码识别性别和年龄

    基于javascript实现根据身份证号码识别性别和年龄

    这篇文章主要介绍了基于javascript实现根据身份证号码识别性别和年龄的相关资料,需要的朋友可以参考下
    2016-01-01
  • JS加密插件CryptoJS实现AES加密操作示例

    JS加密插件CryptoJS实现AES加密操作示例

    这篇文章主要介绍了JS加密插件CryptoJS实现AES加密操作,结合实例形式分析了CryptoJS插件的具体设置与AES加密操作实现技巧,需要的朋友可以参考下
    2018-08-08
  • JS去除字符串两端空格的简单实例

    JS去除字符串两端空格的简单实例

    本篇文章主要是对JS去除字符串两端空格的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • javascript中数组的常用算法深入分析

    javascript中数组的常用算法深入分析

    这篇文章主要给大家介绍了关于javascript中数组的常用算法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用javascript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • 详解JavaScript的内置对象

    详解JavaScript的内置对象

    本文对JavaScript对象的属性、对象的方法、对象的属性、访问对象属性的语法进行了实例分析介绍,有需要的朋友可以看下
    2016-12-12
  • 理解JavaScript的prototype属性

    理解JavaScript的prototype属性

    JavaScript可以说是最让人初学者难以理解的单一属性。我看了一些资料后,开始明白其实这些困难很大程度来自prototype这个名字本身的二义性
    2012-02-02
  • javascript使用闭包模拟对象的私有属性和方法

    javascript使用闭包模拟对象的私有属性和方法

    本文给大家简单介绍了在一个项目中涉及到的javascript使用闭包模拟对象的私有属性和方法,这里记录下来,分享给大家。
    2016-10-10

最新评论