使用electron-builder时如何修改app.asar的文件夹结构？答案

【问题标题】：How to modify the folder structure of app.asar when using electron-builder?使用electron-builder时如何修改app.asar的文件夹结构？
【发布时间】：2020-07-20 17:43:48
【问题描述】：

我正在使用 create-react-app (CRA) 创建和构建我的前端代码。我的（简化的）文件夹结构如下所示：

package.json
node_modules/
public/
  └── electron.js
  └── index.html
src/

我的 npm 脚本：

"build": {
  "appId": "com.somedomain.app",
},
"scripts": {
    "react-start": "react-scripts start",
    "react-build": "react-scripts build",
    "react-test": "react-scripts test --env=jsdom",
    "react-eject": "react-scripts eject",
    "electron-build": "electron-builder",
    "release": "yarn react-build && electron-builder --publish=always",
    "build": "yarn react-build && yarn electron-build"
}

当我运行“build”时，项目被构建并且有一个包含所有内容的build 文件夹，然后电子使用它来创建app.asar 文件。当我提取内容时，我看到以下结构：

package.json
node_modules/
build/
  └── electron.js
  └── index.html

electron-builder 是如何知道从我的项目文件夹中获取build 文件夹的？我尝试通过使用我的 package.json 的 "build" 字段来解决这个问题，如下所示：

"build": {
  "appId": "com.somedomain.app",
  "files": "app"
},

并将我的build 文件夹重命名为app，但随后出现以下错误：

 ⨯ Application entry file "build\electron.js" in the "[redacted][\app.asar" does not exist. Seems like a wrong configuration.

似乎 electron 仍然尝试从 build 文件夹中运行 electron.js，而 app.asar 中现在不存在该文件夹。

如何修改app.asar 文件中的文件结构？它是否必须包含build 文件夹？理想情况下，我希望有以下结构：

package.json
node_modules
electron/
  └── electron.js
frontend
  └── index.html

我尝试进一步修改"files" 字段，我尝试了"extraFiles" 和"buildResources"，但即使我可以按照我想要的方式获取app.asar 中的文件夹结构，我仍然会收到错误：

 ⨯ Application entry file "build\electron.js" in the "[redacted][\app.asar" does not exist. Seems like a wrong configuration.

【问题讨论】：

标签： javascript node.js electron electron-builder asar

【解决方案1】：

我发现了问题所在。显然，当 electron-builder 看到 react-scripts 在依赖项中时，它会自动使用一个名为 react-cra 的内置配置。 react-cra 的内置配置如下所示：

directories: {
  buildResources: "assets"
},
files: ["build/**/*"],
extraMetadata: {
  main: "build/electron.js"
}

extraMetadata 字段是导致

的原因

⨯ Application entry file "build\electron.js" in the "[redacted][\app.asar" does not exist. Seems like a wrong configuration.

错误。

为了防止使用 react-cra 内置配置，可以在 package.json 的 "build" 字段中添加 "extends": null。通过以下配置，我得到了想要的结果：

"build": {
    "appId": "io.gueney.app",
    "extends": null,
    "files": [
      "electron/**/*",
      "frontend/**/*"
    ]
  },

【讨论】：