reactjs - 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 配置错误。默认值 target 在 webpack 中是 'web'。在 Electron 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

对于使用 Webpack 3 的 create-react-app 1.x 或 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"
}

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