Question

我想使用react + webpack + electron来构建桌面应用程序。如何将fs模块注入反应中以便我可以使用它来读取本机文件？我有一个组件，如：

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

使用window.require()代替require()。

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

Answer 2

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

Answer 3

首先：不要在 webpack 上浪费时间 有了 react 和电子，react 已经拥有了在构建时自己打包所需的一切。

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

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

这对我有用。

另外在电子的 main.js 上的 webpreferences 上我设置了这个设置：

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

关注电子网站，网络首选项是一个安全问题，因此我们需要找到一种更好更安全的方法，如here

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

非常感谢!!

3 个答案: