开始前从文件夹中读取文件

Question

我想从我的项目 public/logos 文件夹中获取一组文件名。我正在使用 create-react-app 模板，如您所料，我无法在项目启动后在浏览器中使用 const fs = require('fs')。

那么，有什么方法可以在 npm start 命令后立即填充数组并从文件夹中获取文件名数组，还是我脱离了上下文？

const fs = require('fs')
const path = require('path')
const appRoot = require('app-root-path').path

const getNames = () => {
    fs.readdir(path.join(appRoot, "public", "logos"), (err, files) => {
        return files
    })
}

Answer 1

是的。这是断章取意的。在基于浏览器的 JS 应用程序中不可能。您无法在浏览器中使用 Javascript 访问文件系统。

您可以使用 NodeJS（或任何其他相同的语言）创建一个 REST API 正如您提到的那样，它将 return 文件列表然后可以使用它（API 就像在前端获取或打包 - axios)。这是首选的做法。

Answer 2

如果你需要从文件系统中读取文件，你需要启动服务器，比如express，然后通过前端的请求或者你在浏览器地址中粘贴的link来读取服务器上的文件场.

Answer 3

尽管 Sathishkumar 是正确的，但这不是唯一的方法：在许多情况下，拥有一个仅用于读取静态图像的应用程序服务器可能太多了。

你可以做的是通过更改 webpack 配置来处理这个问题（这需要你先eject所以要非常小心).

在 webpack 中，您拥有所有可用的 Nodejs 功能，但您必须为 webapp 进行静态更改。

一个想法：

用 html-copy-plugin 手动复制 dist 文件夹中的每个图像
从节点读取该文件夹中的每个图像文件并生成图像名称列表
使用 webpack DefinePlugin

现在您将能够从这个新的全局中读取图像名称。

注意：这不是动态读取文件夹中的资源。如果 add/remove 个图像，您将被迫重复应用程序的构建过程。

开始前从文件夹中读取文件

Read files from folder before start

node.js

reactjs