如何使用電子生成器 package 預編譯二進制文件

Question

我正在構建一個使用ffmpeg-static的 electron 應用程序，我花了幾個小時搜索 Stack Overflow 無濟於事。 我使用electron-react-boilerplate啟動了應用程序。 這是文件設置的樣子：

my-app/
├─ .erb/
│  ├─ configs/
│  ├─ . . .
├─ node_modules/
│  ├─ ffmpeg-static/
│  │  ├─ ffmpeg
├─ assets/
│  ├─ icon.png
│  ├─ . . .
├─ src/
│  ├─ RecordingPage.jsx
│  ├─ App.jsx
│  ├─ main.dev.ts
│  ├─ . . .
├─ release/
│  ├─ Application.AppImage
│  ├─ . . .
│ package.json

這是package.json的示例：

{
  . . .
  "scripts": {
    "build": "concurrently \"yarn build:main\" \"yarn build:renderer\"",
    "build:main": "cross-env NODE_ENV=production webpack --config ./.erb/configs/webpack.config.main.prod.babel.js",
    "build:renderer": "cross-env NODE_ENV=production webpack --config ./.erb/configs/webpack.config.renderer.prod.babel.js",
    "rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir src",
    "lint": "cross-env NODE_ENV=development eslint . --cache --ext .js,.jsx,.ts,.tsx",
    "package": "yarn build && electron-builder build --publish never",
    "package-win": "yarn build && electron-builder build --win --x64",
    "package-mac": "yarn build && electron-builder build --mac",
    "postinstall": "node -r @babel/register .erb/scripts/CheckNativeDep.js && electron-builder install-app-deps && yarn cross-env NODE_ENV=development webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.babel.js && opencollective-postinstall && yarn-deduplicate yarn.lock",
    "start": "node -r @babel/register ./.erb/scripts/CheckPortInUse.js && cross-env yarn start:renderer",
    "start:main": "cross-env NODE_ENV=development electron -r ./.erb/scripts/BabelRegister ./src/main.dev.ts",
    "start:renderer": "cross-env NODE_ENV=development webpack serve --config ./.erb/configs/webpack.config.renderer.dev.babel.js",
    "test": "jest"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "cross-env NODE_ENV=development eslint --cache"
    ],
    "{*.json,.{babelrc,eslintrc,prettierrc}}": [
      "prettier --ignore-path .eslintignore --parser json --write"
    ],
    "*.{css,scss}": [
      "prettier --ignore-path .eslintignore --single-quote --write"
    ],
    "*.{html,md,yml}": [
      "prettier --ignore-path .eslintignore --single-quote --write"
    ]
  },
  "build": {
    "productName": "VirtualEnsemble",
    "appId": "nonexistent",
    "asarUnpack": [
      "**/node_modules/ffmpeg-static/*"
    ],
    "files": [
      "dist/",
      "node_modules/",
      "index.html",
      "main.prod.js",
      "main.prod.js.map",
      "package.json"
    ],
    "afterSign": ".erb/scripts/Notarize.js",
    "mac": {
      "target": [
        "pkg"
      ],
      "type": "distribution",
      "hardenedRuntime": true,
      "entitlements": "assets/entitlements.mac.plist",
      "entitlementsInherit": "assets/entitlements.mac.plist",
      "gatekeeperAssess": false
    },
    "dmg": {
      "contents": [
        {
          "x": 130,
          "y": 220
        },
        {
          "x": 410,
          "y": 220,
          "type": "link",
          "path": "/Applications"
        }
      ]
    },
    "win": {
      "target": [
        "nsis"
      ]
    },
    "linux": {
      "target": [
        "AppImage"
      ],
      "category": "Development"
    },
    "directories": {
      "app": "src",
      "buildResources": "assets",
      "output": "release"
    },
    "extraResources": [
      "./assets/**"
    ]
  },
. . .
}

從我的main.dev.ts ：

const pathToFFMPEG = require('ffmpeg-static').replace(
  'app.asar',
  'app.asar.unpacked'
);
const ffmpeg = require('fluent-ffmpeg');

ffmpeg.setFfmpegPath(pathToFFMPEG);

如您所見，我嘗試從此處使用asarUnpack ，但這對我不起作用。 打包應用后沒有app.asar.unpacked 。 我非常困惑，希望能提供任何幫助。

Answer 1

我發現了一些似乎有效的東西。 我只在 Linux 上測試過它。

我將以下內容放在build部分下的package.json中：

"extraResources": [                                                                                                                                                                    
       "./assets/**",
       "./node_modules/ffmpeg-static/ffmpeg"
     ]

它將 ffmpeg 二進制文件從ffmpeg-static模塊復制到打包應用程序內的資源文件夾中。

然后，為了在主進程中使用它，我使用了

const ffmpegpath=path.join(__dirname, '../node_modules/ffmpeg-static/ffmpeg');
const ffmpeg = require('fluent-ffmpeg');
ffmpeg.setFfmpegPath(ffmpegpath);

我使用../因為electron-react-boilerplate中的__dirname指向resources文件夾中的app.asar ，但我們只需要resources文件夾。

我不確定這將如何轉化為 Windows 和 Mac，當我弄清楚時我會更新。