如何在 React + Electron 应用程序中重新定位目标不佳的构建文件？

Posted 2023-03-22

技术标签:

【中文标题】如何在 React + Electron 应用程序中重新定位目标不佳的构建文件？【英文标题】：How do I retarget poorly targeted build files in a React + Electron app? 【发布时间】：2019-08-26 17:54:06 【问题描述】：

我正在尝试使用 react 和电子构建桌面应用程序。我可以使用npm start build 构建项目，但是当我运行可执行文件时，我得到一个带有白屏的节点应用程序，因为该应用程序找不到它需要的资源。

这些错误是：

Failed to load resource: net::ERR_FILE_NOT_FOUND /F:/static/css/main.056419ee.chunk.css:1   
Failed to load resource: net::ERR_FILE_NOT_FOUND 2.eba76f4b.chunk.js:1  
Failed to load resource: net::ERR_FILE_NOT_FOUND main.175818bb.chunk.js:1

F: 是正确的驱动器，但我认为 Electron 不应该在驱动器根目录中寻找 static 目录。我不知道是什么原因造成的，也不知道为什么会有领先的/。另外，我不知道它为什么要在不同的目录中寻找另外两个块文件；这三个文件都在./build/static/js/。

这是我的第一个 reactjs 应用程序，也是我的第一个 nodejs 应用程序之一，所以我不确定如何调试它。我对所有构建步骤都不是很清楚，因为我使用了一些没有任何解释的样板和教程。我最初开始使用的命令来自create-react-appp，特别是npx create-react-app creative-ontology-editor 当我使用npm start 和npm run electron-dev 运行反应部分时，它可以正常工作。从那里我尝试使用 this tutorial 和 this package example 等来让电子工作。如果这有助于解决问题，我正在考虑将项目公开。

源代码

`index.html`

这是构建的电子应用程序显示的 html：（注意：我美化了但将缩小的 js 保留在一行中，以便可以轻松查看其余部分）

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/>
        <meta name="theme-color" content="#000000"/>
        <link rel="manifest" href="/manifest.json"/>
        <title>Creative Ontology Editor</title>
        <link href="/static/css/main.056419ee.chunk.css" rel="stylesheet">
    </head>
    <body>
        <noscript>You need to enable javascript to run this app.</noscript>
        <div id="root"></div>
        <script>!function(l)function e(e)for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u||[]),a()function a()for(var e,r=0;r<c.length;r++)for(var t=c[r],n=!0,o=1;o<t.length;o++)var u=t[o];0!==p[u]&&(n=!1)n&&(c.splice(r--,1),e=f(f.s=t[0]))return evar t=,p=1:0,c=[];function f(e)if(t[e])return t[e].exports;var r=t[e]=i:e,l:!1,exports:;return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exportsf.m=l,f.c=t,f.d=function(e,r,t)f.o(e,r)||Object.defineProperty(e,r,enumerable:!0,get:t),f.r=function(e)"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,value:"Module"),Object.defineProperty(e,"__esModule",value:!0),f.t=function(r,e)if(1&e&&(r=f(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",enumerable:!0,value:r),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e)return r[e].bind(null,n));return t,f.n=function(e)var r=e&&e.__esModule?function()return e.default:function()return e;return f.d(r,"a",r),r,f.o=function(e,r)return Object.prototype.hasOwnProperty.call(e,r),f.p="/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()([])</script>
        <script src="/static/js/2.eba76f4b.chunk.js"></script>
        <script src="/static/js/main.175818bb.chunk.js"></script>
    </body>
</html>

`package.json`

这是我项目的package.json。我知道我可能把我的开发和正常依赖都搞混了，但我怀疑这是问题的一部分/


  "name": "creative-ontology-editor",
  "version": "0.1.0",
  "author": "Joe Bush",
  "description": "An applied ontology organization tool",
  "private": true,
  "main": "public/electron.js",
  "dependencies": 
    "concurrently": "^4.1.0",
    "cross-env": "^5.2.0",
    "electron-is-dev": "^1.0.1",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-scripts": "2.1.8",
    "typescript": "^3.4.1",
    "wait-on": "^3.2.0"
  ,
  "scripts": 
    "react-build": "react-scripts build",
    "react-test": "react-scripts test",
    "react-eject": "react-scripts eject",
    "react-start": "react-scripts start",
    "electron-build": "electron-builder",
    "release": "yarn react-build && electron-builder --publish=always",
    "build": "yarn react-build && yarn electron-build",
    "electron-dev": "concurrently \"cross-env BROWSER=none yarn react-start\" \"wait-on http://localhost:3000 && electron .\"",
    "dist": "build"
  ,
  "build": 
    "appId": "creative-ontology-editor",
    "files": [
      "build/**/*",
      "node_modules/**/*"
    ],
    "directories": 
      "buildResources": "public"
    ,
    "linux": 
      "target": [
        "AppImage",
        "deb"
      ]
    ,
    "win": 
      "target": "NSIS",
      "icon": "build/icon.ico"
    
  ,
  "eslintConfig": 
    "extends": "react-app"
  ,
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": 
    "electron": "^4.1.3",
    "electron-builder": "^20.39.0"

缩写的目录树如下所示

????creative-ontology-editor
|-- ????build
|   |-- ????static
|   |   |-- ????csss
|   |   +-- ????js
|   |       |-- 2.eba76f4b.chunk.js
|   |       |-- 2.eba76f4b.chunk.js.map
|   |       |-- main.175818bb.chunk.js
|   |       |-- main.175818bb.chunk.js.map
|   |       |-- runtime~main.a8a9905a.js
|   |       |-- runtime~main.a8a9905a.js.map
|   |
|   |-- asset-manifest.json
|   |-- electron.js
|   |-- index.html
|   |-- manifest.json
|   |-- precache-manifest.825 ... .js
|   +-- service-worker.js
|
|-- ????dist
|   |-- ????win-unpacked
|   |-- builder-effective-config.yaml
|   |-- creative-ontology-editor Setup 0.1.0.exe
|   |-- creative-ontology-editor Setup 0.1.0.exe.blockmap
|
|-- ????node_modules
|-- ????public
|   |-- electron.js
|   |-- index.html
|   +-- manifest.json
|
|-- ????src
|   |-- ????Components
|   |-- App.css
|   |-- App.js
|   +-- index.js
|
+-- package.json

`./build/asset-manifest.json`


  "main.css": "/static/css/main.056419ee.chunk.css",
  "main.js": "/static/js/main.175818bb.chunk.js",
  "main.js.map": "/static/js/main.175818bb.chunk.js.map",
  "runtime~main.js": "/static/js/runtime~main.a8a9905a.js",
  "runtime~main.js.map": "/static/js/runtime~main.a8a9905a.js.map",
  "static/js/2.eba76f4b.chunk.js": "/static/js/2.eba76f4b.chunk.js",
  "static/js/2.eba76f4b.chunk.js.map": "/static/js/2.eba76f4b.chunk.js.map",
  "index.html": "/index.html",
  "precache-manifest.82521987a6df63b594987c0f56a4cbb9.js": "/precache-manifest.82521987a6df63b594987c0f56a4cbb9.js",
  "service-worker.js": "/service-worker.js",
  "static/css/main.056419ee.chunk.css.map": "/static/css/main.056419ee.chunk.css.map"

`./build/manifest.json`


  "short_name": "COE",
  "name": "Creative Ontology Editor",
  "icons": [
    
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"

【问题讨论】：

【参考方案1】：

来自Kitze's article，我的package.json少了一行：

"homepage": "./"

他甚至解释过：

最后一件事：

在 package.json 中设置“主页”，否则打包后的应用将找不到 .js 和 .css 文件。

【讨论】：

干得好 - 如前所述，create react app 会基于绝对路径构建 index.html。这在 Electron 中加载时会导致问题，可以通过显示主页来解决。

以上是关于如何在 React + Electron 应用程序中重新定位目标不佳的构建文件？的主要内容，如果未能解决你的问题，请参考以下文章

即使在跨多个组件路由之后，如何在 Electron 驱动的 React 应用程序中处理持久数据、函数和任务？

如何部署 Electron React 样板应用程序？

如何将 React Router 与 Electron 一起使用？

在 Electron 中提供静态文件（React 应用程序）

Electron 中的路由 + 创建 React 应用程序

如何根据 Electron 菜单单击更改 Redux 状态？