這篇文章主要講解了electron將任意資源打包的方法，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供保康網(wǎng)站建設(shè)、保康做網(wǎng)站、?？稻W(wǎng)站設(shè)計(jì)、?？稻W(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、?？灯髽I(yè)網(wǎng)站模板建站服務(wù)，10年保康做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

如何打包資源

只想寫(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');
 }
});

看完上述內(nèi)容，是不是對(duì)electron將任意資源打包的方法有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。