如何使用e-builder打包预编译的二进制文件

Question

我正在构建一个使用ffmpeg-static的电子应用程序，我花了几个小时搜索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);

如您所见，我尝试使用来自here的asarUnpack，但这对我不起作用。打包应用程序后没有app.asar.unpacked。我完全迷惑了，希望能得到任何帮助。

Answer 1

我发现了一些似乎有用的东西。我只在Linux上测试过它。

我在我的package.json中的build部分下放置了以下内容：

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

它将FMPEG二进制文件从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上，我会在弄清楚的时候更新。