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

Question

我正在尝试使用 React.js 编写一个 electron 应用程序，该应用程序访问文件系统。

这是我的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。

如果你使用 create-react-app 创建了一个 react 应用，那么你必须弹出 webpack 配置并更新配置。

或者，如果你没有定位到弹出 webpack 的方法，那么有一些选项。

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

1) 安装 react-app-rewired

对于带有 Webpack 4 的 create-react-app 2.x：

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

对于 create-react-app 1.x 或带有 Webpack 3 的 react-scripts-ts：

$ 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 脚本中对 react-scripts 的现有调用以进行启动、构建和测试

/* 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"
}

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