如何使用电子生成器 package 预编译二进制文件

Question

I am building an electron application that makes use of ffmpeg-static and I have spent hours searching Stack Overflow to no avail. I started the application using electron-react-boilerplate . Here is what the file setup looks like:

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

Here is a sample of the 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/**"
    ]
  },
. . .
}

And from my main.dev.ts :

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

ffmpeg.setFfmpegPath(pathToFFMPEG);

As you can see, I tried using the asarUnpack from here , but that did not work for me. There is no app.asar.unpacked after packaging the application. I am thoroughly confused and would appreciate any help.

Answer 1

I found something that seems to work. I have only tested it on Linux though.

I put the following in my package.json under the build section:

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

which copies the ffmpeg binary from the ffmpeg-static module to a resources folder inside the packaged app.

Then, to use it in the main process, I used

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

I used ../ because the __dirname in electron-react-boilerplate points to the app.asar in the resources folder, but we just want the resources folder.

I am unsure how this will translate to Windows and Mac, I will update when I figure it out.