我如何使用 fs 与电子反应？

Question

我想用react+webpack+electron搭建一个桌面app.How我可以把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 repo 上提供一个现有的例子，那就再好不过了。

Answer 1

最简单的方法可能是使用 webpack-target-electron-renderer, you can find examples of using it in electron-react-boilerplate。

Answer 2

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

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

Answer 3

首先：不要在 webpack 上浪费时间 在 React 和 Electron 上，React 已经拥有构建时需要的一切来打包自己。

正如侯赛因在他的回答中所说：

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

对我有用。

此外，在 electron main.js 的网络首选项中，我设置了以下设置：

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

根据电子网站的说法，webpreferences 是一个安全问题，因此我们需要找到一种更好更安全的方法，如所述here

我如何使用 fs 与电子反应？

how can I use fs in react with electron?

reactjs

webpack

electron