如何使用fs与电子反应？ [英] how can I use fs in react with electron?

问题描述

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

I want use react+webpack+electron to build a desktop app.How can I inject fs module into react so that I can use it to read native files? I have a component such as:

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

I use webpack to build js codes into a bundle.js,and in index.html

...
<div id="app"></div>
<script src="bundle.js"></script>
...

在 webpack.config.js ：

...
plugins: [new webpack.IgnorePlugin(new RegExp("^(fs|ipc)$"))]
...

我找到此配置在互联网上，因为如果不添加它，Webpack将报告错误，但是我不知道这是什么意思。

I find this config on the internet because if I don't add it the webpack will report error,but I don't know how this means.

我有一个非常简单的 main.js ，它与电子快速入门的main.js相同

And I have a very easy main.js which is the same as electron-quick-start's main.js

我丢失了一些重要的东西吗？

Do I lose some important things?

如果您能提供一个存在的例子，那就更好了

It can't be better if u can provide a existed example on github repo.

推荐答案

使用 window.require（）代替 require（）。

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

这篇关于如何使用fs与电子反应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！