我想创建一个桌面应用程序，该应用程序读取json数据文件，然后使用该数据在屏幕上呈现内容。 json数据文件需要打包到应用中
关注文章如何使用create-react-app并使其在电子中工作
https://medium.freecodecamp.org/building-an-electron-application-with-create-react-app-97945861647c
我在开发环境中所做的所有工作。我想进行分发，目前使用电子生成器创建安装程序，因此我可以分发该应用程序
但是，似乎我的数据文件未打包，或者可能是……我说不清，但是安装后运行电子应用程序时无法访问
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;
{
"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
有人可以教我如何在这种设置中打包静态内容吗？甚至有可能，为什么这一切都那么困难！
我是一名Java开发人员，精通C＃，两种语言都从未让我感到头疼……只是读取打包在JAR或DIST文件夹中的文件!!!!!!!!!
答案 0 :(得分：0)
好象该文件夹毕竟被打包在asar文件中。但是，您需要从应用程序环境变量相对访问资产。我设法使其与此一起工作。
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％的开发时间花在尝试配置应用程序上，然后开发有意义的软件……那是不值得的！