electron 在与电子React中,我如何使用fs?

iugsix8n  于 2022-12-08  发布在  Electron
关注(0)|答案(4)|浏览(292)

我想使用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回购的现有例子,那就再好不过了。

7lrncoxx

7lrncoxx1#

请使用window.require()而不是require()

const fs = window.require('fs');
qmelpv7a

qmelpv7a2#

最简单的方法可能是使用webpack-target-electron-renderer,您可以在electron-react-boilerplate中找到使用它的示例。

aamkag61

aamkag613#

首先是:不要浪费时间与网络包与React和电子,React已经有一切,它需要自己 Package 自己时,建设。
正如侯赛因在答复中所说:

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

对我有用。
此外,在electron的main.js上的webpreferences上,我设置了以下设置:

webPreferences: {
  preload: path.join(__dirname, 'preload.js'),
  nodeIntegration: true,
  enableRemoteModule: true,
  contextIsolation: false,
  nodeIntegrationInWorker: true,
  nodeIntegrationInSubFrames: true
}

下面的电子网站,webpreferences是一个安全问题,所以我们需要找到一个更好的一个更安全的方法,如这里所述

fkaflof6

fkaflof64#

由于Electron 12 contextIsolation默认为true,因此建议使用。
所以对于nodeIntegration: truecontextIsolation: true
先看https://www.electronjs.org/docs/latest/tutorial/context-isolation/
preload.js中的第一个require函数公开给渲染器:

require: (callback) => window.require(callback)

THENrenderer中,您可以通过以下方式导入它:

const { myAPI } = window
const fs = myAPI.require('fs')

相关问题