如何使用 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 和 electron-quick-start 的 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?

如果你能在 github repo 上提供一个现有的例子，那就再好不过了.

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屋！