fs.readdirSync不是一个函数-电子+ react.js

Question

我试图用React.js编写一个电子应用程序，这个应用程序访问文件系统。

这是我的fileWalker.js

const path = require('path');
const fs = require('fs');

function *walkFolders (folder, recurseLevel = 0) {
  try {
    const files = fs.readdirSync(folder);

    for (const file of files) {
      try {
        const pathToFile = path.join(folder, file);
        const stat = fs.statSync(pathToFile);
        const isDirectory = stat.isDirectory();
        if (isDirectory && recurseLevel > 0) {
          yield * walkFolders(pathToFile, recurseLevel - 1)
        }
        else {
          yield {
            rootDir: folder,
            fileName: file,
            isDir: isDirectory,
            stat: stat
          }
        }
      }
      catch (err) {
        yield {
          rootDir: folder,
          fileName: file,
          error: err
        }
      }
    }
  }
  catch (err) {
    yield {
      rootDir: folder,
      error: err
    }
  }
}

export default walkFolders;

然后在我的App.js中，我写道：

  getFolders(absolutePath) {
    let folders = [];
    // check incoming arg
    if (!absolutePath || typeof absolutePath !== 'string') {
      return folders
    }
    for (const fileInfo of walkFolders(absolutePath, false)) {
      // all files and folders
      console.log(fileInfo);
      if ('error' in fileInfo) {
        console.error(`Error: ${fileInfo.rootDir} - ${fileInfo.error}`);
        continue
      }
      // we only want folders
      if (!fileInfo.isDir) {
        continue
      }
      const node = this.createNode(fileInfo)
      folders.push(node)
    }
    return folders
  }

   ...
  componentDidMount() {
    this.getFolders("E:/gits");
  }
  constructor(props){
    super(props);
    this.getFolders=this.getFolders.bind(this);
    ...
  }
...

但我知道这个错误：

TypeError: fs.readdirSync is not a function

​

​

我如何解决这个问题？

Answer 1

看来Webpack的配置错误。webpack的target的默认值是“web”。在电子js中，应该是electron-renderer。

如果你是通过使用创建-反应-应用程序创建一个反应应用程序，那么你必须弹出webpack的配置并更新配置。

或者，如果你没有位置弹出webpack的意思，有一些选择。

通过使用react-app-rewired，我们可以覆盖webpack的配置。

1)安装react app-重新连线

对于创建-反应-应用程序2.x与Webpack 4：

$ npm install react-app-rewired --save-dev

对于创建-反应-应用程序1.x或反应-脚本-ts与Webpack 3：

$ npm install react-app-rewired@1.6.2 --save-dev

2)在根目录中创建config-overrides.js文件

module.exports = function override(config, env) {
  config.target = 'electron-renderer';
  return config;
}

3)“翻转”现有的响应调用-- npm脚本中用于启动、构建和测试的脚本

/* package.json */

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
}

然后启动服务器。可能是工作。:-)