快捷導(dǎo)航

electron 如何將任意資源打包的方法步驟

更新時(shí)間：2020年04月16日 11:27:40 作者：kross

這篇文章主要介紹了electron 如何將任意資源打包的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

如何打包資源

只想寫(xiě)個(gè)圖形小工具，本質(zhì)上還是調(diào)用寫(xiě)好的 java 程序，因?yàn)槲矣X(jué)得在命令行里面來(lái)回切目錄，復(fù)制路徑等操作實(shí)在是太麻煩了。

那么我現(xiàn)在已經(jīng)搞定了如何從 electron 的 js 事件里獲得文件路徑，我也搞定了如何在 electron 的 main.js 里面創(chuàng)建新的進(jìn)程執(zhí)行指令，那么如何使用到打包好的 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 里面加了一個(gè) extraResources，另外，通過(guò) electron-packager 打包的參數(shù)里面也加上一個(gè) --extra-resource='./extraResources'

然后打包的時(shí)候就可以把你想要的任何文件打包進(jìn)去了，jar 也好，python 腳本也好。

如何引用資源

需要注意的是，debug 運(yùn)行和 release 運(yùn)行是不一樣的，這里，我們就需要一個(gè)東西來(lái)在運(yùn)行時(shí)區(qū)分，我現(xiàn)在是 debug 還是 release。

注意上面的 json 腳本中，有一個(gè) export FAVOR=debug，這個(gè)相當(dāng)于在 debug 運(yùn)行的時(shí)候加入了一個(gè)環(huán)境變量。

怎么讀取環(huán)境變量呢？在 main.js 里面這樣讀?。?/p>

console.log("favor: " + process.env.FAVOR)

接下來(lái)就是區(qū)分運(yùn)行時(shí)來(lái)獲取資源路徑了。

function getResPath() {
 if (isDebug) {
  return "./extraResources"
 } else {
  return process.resourcesPath + "/extraResources"
 }
}

僅此記錄一下，給可能需要的人。

electron打包的一些坑

我們知道使用electron打包的時(shí)候設(shè)置asar為true，electron-builder會(huì)智能的把一些native的程序不打包到app.asar里面，但是我碰到一個(gè)很奇怪的問(wèn)題，周五的時(shí)候需要使用語(yǔ)音的格式轉(zhuǎn)換，用到了amrToMp3和ffmpeg-static這兩個(gè)庫(kù)，其中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這個(gè)命令，ffmpegPath打包后基本是****/app.asar/src/node_modules/ffmpeg-static/bin/darwin/x64/ffmpeg，但是打包后運(yùn)行提示了can not found ****/app.asar/src/node_modules/ffmpeg-static/bin/darwin/x64/ffmpeg 很尷尬，但是我去解壓了，明明是存在的，后來(lái)我去看了類似的一個(gè)庫(kù)node-notifier，發(fā)現(xiàn)用的是execFile這個(gè)命令，然后我修改了一下，結(jié)果。。。。居然就可以了。這個(gè)地方誰(shuí)知道原因，求解答。。。。

修改之后的程序代碼：

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');
 }
});

到此這篇關(guān)于electron 如何將任意資源打包的方法步驟的文章就介紹到這了,更多相關(guān)electron 任意資源打包內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: