快捷導(dǎo)航

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

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

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

如何打包資源

只想寫個圖形小工具，本質(zhì)上還是調(diào)用寫好的 java 程序，因為我覺得在命令行里面來回切目錄，復(fù)制路徑等操作實在是太麻煩了。

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

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

如何引用資源

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

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

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

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

接下來就是區(qū)分運行時來獲取資源路徑了。

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

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

electron打包的一些坑

我們知道使用electron打包的時候設(shè)置asar為true，electron-builder會智能的把一些native的程序不打包到app.asar里面，但是我碰到一個很奇怪的問題，周五的時候需要使用語音的格式轉(zhuǎn)換，用到了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，發(fā)現(xiàn)用的是execFile這個命令，然后我修改了一下，結(jié)果。。。。居然就可以了。這個地方誰知道原因，求解答。。。。

修改之后的程序代碼：

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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: