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

Posted

技术标签:

【中文标题】使用electron-builder时如何修改app.asar的文件夹结构?【英文标题】:How to modify the folder structure of app.asar when using electron-builder? 【发布时间】: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. 

【问题讨论】:

【参考方案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/**/*"
    ]
  ,

【讨论】:

以上是关于使用electron-builder时如何修改app.asar的文件夹结构?的主要内容,如果未能解决你的问题,请参考以下文章

使用 electron-builder NSIS 安装程序安装后运行时如何传递命令行参数

electron-builder打包跳过publish

如何增加由 electron-builder 构建的应用程序的最大内存限制?

使用electron-builder打包时下载electron失败解决方案

electron-builder,如何设置节点环境变量

如何从 Electron-builder NSIS 获取选定的语言