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 任意资源打包 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • electron 安装，调试，打包的具体使用

    项目推荐 想要快速的了解 electron, 调试 electron, 打包 electron, 推荐项目electron-webpack-quick-start 快速开始 先安装 cross-env,用于设置环境变量.因为在后面安装electron, 需要下载, 默认的源在国内下载很慢,需要通过设置环境变量来切换下载地址 #安装cross-env,用于设置环境变量的 npm install cross-env -g Clone项目到本地 # Clone repository git clone

  • electron+vue实现div contenteditable截图功能

    最近在学习基于electron + electron-vue开发聊天客户端项目时,需要用到编辑器插入表情功能.一般通过input或textarea也能实现,通过插入[笑脸].(:12 这些标签,展示的时候解析标签就行. 如下图效果: 在网上找到的jq插件实现在textarea光标处插入表情符标签 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

  • Electron实现应用打包、自动升级过程解析

    上次成功搭建了vue + electron的helloworld程序,这次将electron应用打包及自动升级的流程梳理了一下. 1. 应用打包 使用electron builder打包只需要在vue.config.js中配置即可,这里需要注意的是,默认情况下electron builder打包出来的安装程序是不能修改安装目录的,需要allowToChangeInstallationDirectory这个配置设置为true. // see https://cli.vuejs.org/config

  • SpringBoot + Vue + Electron 开发 QQ 版聊天工具的详细教程

    一.简介 这是一款基于 JS 实现的超轻量级桌面版聊天软件.主要适用于私有云项目内部聊天,企业内部管理通讯等功能,主要通讯协议websocket.也支持web网页聊天实现.文字聊天,互传文件,离线消息,群聊,断线重连等功能. 先看一下效果,下图左边是web版,右边为PC版. 二.本地搭建 2.1 技术栈 后端技术栈: springboot: 让开发人员快速开发的一款Java的微服务框架. tio: 是百万级网络框架oauth2.0: OAuth 2.0 是一个行业的标准授权协议. OAuth 2

  • Electron 调用命令行(cmd)

    因为最近的项目需求,需要在 Electron 客户端启动的时候启动 nginx 服务,所以研究了一下怎么在 Electron 调用 命令行. 因为 Electron 基于 Chromium 和 Node.js,可以直接使用 Node.js 的 API 和一些包.目前研究有以下两种方法: child_process child_process是 Node.js 的内置模块,该模块提供了衍生子进程的能力. 实现代码: const exec = require('child_process').exe

  • 基于Electron实现桌面应用开发代码实例

    Electron是一个可以使用 JavaScript,HTML 和 CSS 构建跨平台桌面应用程序的开源框架. 本文主要分享一下采用vue + electron开发桌面程序的搭建过程. 1. 环境准备 这里采用的是vue-cli3.x,可以通过下面的指令查看当前vue-cli的版本: vue --version# 3.9.3 这里我用的是3.9.3 如果没有装vue-cli可以通过下面的命令安装: npm install -g @vue/cli 如果是vue-cli还是2.x可以先卸载2.x然后

  • electron-vue开发环境内存泄漏问题汇总

    package.json "dependencies": { "vue": "^2.5.16" }, "devDependencies": { "ajv": "^6.5.0", "babel-core": "^6.26.3", "babel-loader": "^7.1.4", "babel-plu

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

    如何打包资源 只想写个图形小工具,本质上还是调用写好的 java 程序,因为我觉得在命令行里面来回切目录,复制路径等操作实在是太麻烦了. 那么我现在已经搞定了如何从 electron 的 js 事件里获得文件路径,我也搞定了如何在 electron 的 main.js 里面创建新的进程执行指令,那么如何使用到打包好的 jar 包或者其他资源呢? 直接看下 packages.json 里面吧. { "name": "....", "version"

  • Android多渠道打包的方法步骤

    Android多渠道打包的方法步骤

    本文介绍了Android多渠道打包的方法步骤,分享给大家,具体如下: 1.生成签名文件 点击 Build -> Generate Signed APK: 2.创建一个签名 红色填写部分需要认真填写,并牢记,其余部分随意填写 有了签名,单个app打包我就不详细说了,具体说下多渠道打包的步骤 2.多渠道打包 作用:就是根据不同的渠道值,去具体分析每个渠道的用户情况 步骤一: 在AndroidManifest.xml的application标签里添加一个meta-data标签定义 <meta-dat

  • 利用nginx搭建静态资源服务器的方法步骤

    以windows为例,linux其实一样: 搭建静态资源服务器 我电脑上的work文件夹下面有很多图片,我想通过nginx搭建静态资源服务器,通过在地址栏输入ip+port的方式完成目录的映射 找到nginx安装目录,打开/conf/nginx.conf配置文件,添加一个虚拟主机 添加监听端口.访问域名 重点是添加location, 映射-URL:/work/; 注意:如果当前server模块中已有一个location且URL为"/",那么新建的location的url应为匹配路径,不

  • Eclipse中配置Maven build打包的方法步骤

    目的:在Eclipse中配置Maven build打包 项目右击-->Run As-->Run Configurations 在左侧Maven Build下选中自己的工程名 然后在右侧Goals输入框中输入"clean package" 点击Apply完成配置,如图 注意: [INFO] BUILD FAILURE [INFO] ------------------------------------------------------------------------

  • electron打包vue项目的方法 步骤

    electron打包vue项目的方法 步骤

    目录 创建项目 添加electron-builder electron下载失败 窗体运行 打包exe 白屏 创建项目 点击这里 添加electron-builder 1.在项目目录下运行命令:vue add electron-builder2.electron-builder添加完成后会选择electron版本,直接选择最新版: electron下载失败 vue add electron-builder下载electron会下载失败,使用淘宝镜像下载:cnpm i electron 窗体运行 1

  • HBuilder打包App方法(图文教程)

    HBuilder打包App方法(图文教程)

    HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE.该软件既可以支持web代码编写,也可以将已经编写好的项目代码打包为手机APP. HBuilder提供的打包有云端打包和本地打包两种,云端打包的特点是DCloud官方配置好了原生的打包环境,可以把HTML等文件编译为原生安装包. 1,下载HBuilder,注册并登陆.首先打开"文件"-"新建"-"移动APP",输入"应用名称","位置

  • Android编程实现通过反射获取资源Id的方法

    本文实例讲述了Android编程实现通过反射获取资源Id的方法.分享给大家供大家参考,具体如下: 在将自己写的工具打成.jar包的时候,有时候会需要引用到res中的资源,这时候不能将资源一起打包,只能通过反射机制动态的获取资源. 特别用在自己定义一个工具将其打成.jar包时,特别注意资源的获取 1.封装成一个工具类 package com.cp.utils; import android.content.Context; public class CPResourceUtil { public

  • webpack分离css单独打包的方法

    webpack分离css单独打包的方法

    本文介绍了webpack分离css单独打包的方法,分享给大家,具体如下: CHANGELOG 2018-02-08 14:46:06 刚看了下,网上查了 webpack单独打包css,找到的文章,本文比较靠前,但是由于写的比较混乱,因此重新整理一下内容,更通俗易懂一点. 2018-02-01 14:45:23 由于这篇文章只写了如何把CSS打包成一个CSS文件,没有讲解如何打包成多个CSS文件,经简友提点,这里添加上了 打包成多个CSS文件的方法. 2016-05-17 11:55 刚学习web

  • 使用pkg打包ThinkJS项目的方法步骤

    在 ThinkJS 的用户群里,经常有开发者提出需要对源码进行加密保护的需求.我们知道 JavaScript 是一门动态语言,不像其他静态语言可以编译成二进制包防止源码泄露.所以就出现了 pkg.nexe 之类的工具,支持将 JS 代码连同 Node 一块打包成一个可执行文件,一来解决了环境依赖的问题,二来解决了大家关心的源码保护的问题. 在pkg 模块的 README 中,罗列了它的几大用处,如果你有下面的几个需求的话建议不妨试试. 为应用提供商业发行版而不用暴露源码 为应用提供 demo 而

  • maven 使用assembly 进行打包的方法

    1. pom 中添加assembly 插件 要使用assembly 进项编译打包, 首先主要在pom 中的build中添加插件信息, 具体如图下所示: <build> <finalName>${project.artifactId}</finalName> <sourceDirectory>src/main/java</sourceDirectory> <resources> <resource> <director

随机推荐