electron - 使用静态文件创建一个 Electron create-react-app 发行版

Question

我想要什么

我想创建一个读取 json 数据文件的桌面应用程序，然后使用该数据在屏幕上呈现内容。 json数据文件需要打包到app中

我做了什么

阅读一篇文章，了解如何使用 create-react-app 并使其在 Electron 中工作

https://medium.freecodecamp.org/building-an-electron-application-with-create-react-app-97945861647c

我被困在哪里

到目前为止我所做的一切都在开发环境中有效。我想要进行分发，目前使用 electro-builder 创建安装程序，以便我可以分发应用程序

但是，我的数据文件似乎没有打包，或者可能是......我真的不知道，但安装后运行 Electron 应用程序时无法访问

代码

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

const electron = window.require('electron');
const fs = electron.remote.require('fs');

class App extends Component {

    constructor(props) {
        super(props);
        this.state = {files: []}
    }

    componentDidMount() {
        fs.readdir('./data', (err, files) => {
            this.setState({files: files});
        });
    }

    renderFiles = () => {
        return this.state.files.map((file, index) => {
            return (<p key={index}>{file}</p>);
        })
    }

    render() {
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h1 className="App-title">Welcome to React</h1>
            </header>
            <p className="App-intro">
              To get started, edit <code>src/App.js</code> and save to reload.
            </p>
            {this.renderFiles()}
          </div>
        );
    }
}

export default App;

package.json

{
  "name": "react-electron-poc",
  "version": "0.1.0",
  "private": true,
  "description": "Electron App Poc",
  "author": "Celludriel",
  "devDependencies": {
    "electron": "^1.7.9",
    "foreman": "^2.0.0",
    "react-scripts": "0.8.5",
    "electron-builder": "^20.24.3"
  },
  "dependencies": {
    "react": "^16.1.1",
    "react-dom": "^16.1.1"
  },
  "homepage": "./",
  "main": "src/electron-starter.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "electron": "electron .",
    "dev": "nf start -p 3000",
    "pack": "build --dir",
    "dist": "npm run build && build",
    "postinstall": "install-app-deps"
  },
  "build": {
    "appId": "com.electron.electron-with-create-react-app",
    "win": {
      "icon": "https://cdn2.iconfinder.com/data/icons/designer-skills/128/react-256.png"
    },
    "directories": {
      "buildResources": "public"
    },
    "files": ["**/*", "dist/**/*"],
    "extends": null
  }
}

目录结构

    Directory: C:\Workspaces\react-electron-poc


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----       21/07/2018     10:51                .idea
d-----       21/07/2018      9:34                build
d-----       20/07/2018     19:33                data
d-----       20/07/2018     20:22                dist
d-----       20/07/2018     19:12                node_modules
d-----       20/07/2018     17:22                public
d-----       21/07/2018     10:10                src
-a----       20/07/2018     17:22            285 .gitignore
-a----       20/07/2018     19:12         367115 package-lock.json
-a----       20/07/2018     20:21           1058 package.json
-a----       20/07/2018     18:10             56 Procfile
-a----       20/07/2018     17:22         119451 README.md

需要帮助

谁能教我如何在这种设置中打包静态内容？这是否可能，为什么这一切如此困难!!!!!!!!

我是一名涉足 C# 的 Java 开发人员，这两种语言从来没有给我带来过这种头痛......只是为了读取打包在 JAR 或 DIST 文件夹中的文件!!!!!!!!!

Answer 1

看来该文件夹毕竟被打包在 asar 文件中了。但是，您需要从应用程序环境变量中相对访问 Assets 。我设法让它与此一起工作。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

const electron = window.require('electron');
const fs = electron.remote.require('fs');
const app = electron.remote.app;

class App extends Component {

    constructor(props) {
        super(props);
        this.state = {files: []}
    }

    componentDidMount() {
        debugger;
        const appPath = app.getAppPath();
        console.log(appPath);
        const path = app.getPath('userData');
        console.log(path);
        fs.readdir(appPath + '/data', (err, files) => {
            debugger;
            this.setState({files: files});
        });
    }

    renderFiles = () => {
        return this.state.files.map((file, index) => {
            return (<p key={index}>{file}</p>);
        })
    }

    render() {
        return (
          <div className="App">
            <header className="App-header">
              <img src={logo} className="App-logo" alt="logo" />
              <h1 className="App-title">Welcome to React</h1>
            </header>
            <p className="App-intro">
              To get started, edit <code>src/App.js</code> and save to reload.
            </p>
            {this.renderFiles()}
          </div>
        );
    }
}

export default App;

注意 app.getAppPath(); 它可以工作，但我越来越确信我宁愿使用 C# 或 Java 等成熟技术，然后继续尝试学习 React 或任何其他技术网络技术。如果您必须花费 80% 的开发时间来尝试配置应用程序，然后开发有意义的软件......这是不值得的!