我想使用react+webpack+electron来构建一个桌面应用程序。如何将fs
模块注入react,以便我可以使用它来读取原生文件?我有一个组件,例如:
class Some extends Component {
render() {
return <div>{this.props.content}</div>
}
}
export default Some;
在entry.js
中:
import React from 'react';
import { render } from 'react-dom';
import Some from './src/some.jsx';
const data = "some content";
/*
How can I read data by fs module?
import fs from 'fs' doesn't work here
*/
render(
<Some content={data} />,
document.getElementById('app')
);
我使用webpack将js代码构建到bundle.js和index.html中
...
<div id="app"></div>
<script src="bundle.js"></script>
...
在webpack.config.js
中:
...
plugins: [new webpack.IgnorePlugin(new RegExp("^(fs|ipc)$"))]
...
我发现这个配置在互联网上,因为如果我不添加它的webpack将报告错误,但我不知道这意味着什么。
我有一个非常简单的main.js
,它与electron-quick-start的main.js相同
我是不是丢了什么重要的东西?
如果你能提供一个关于github回购的现有例子,那就再好不过了。
4条答案
按热度按时间7lrncoxx1#
请使用
window.require()
而不是require()
。qmelpv7a2#
最简单的方法可能是使用webpack-target-electron-renderer,您可以在electron-react-boilerplate中找到使用它的示例。
aamkag613#
首先是:不要浪费时间与网络包与React和电子,React已经有一切,它需要自己 Package 自己时,建设。
正如侯赛因在答复中所说:
对我有用。
此外,在electron的main.js上的webpreferences上,我设置了以下设置:
下面的电子网站,webpreferences是一个安全问题,所以我们需要找到一个更好的一个更安全的方法,如这里所述
fkaflof64#
由于Electron 12
contextIsolation
默认为true
,因此建议使用。所以对于
nodeIntegration: true
和contextIsolation: true
先看https://www.electronjs.org/docs/latest/tutorial/context-isolation/
preload.js
中的第一个将require
函数公开给渲染器:THEN在
renderer
中,您可以通过以下方式导入它: