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

Read files from folder before start

我想从我的项目 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
    })
}

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

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

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

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

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

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

一个想法:

  • html-copy-plugin 手动复制 dist 文件夹中的每个图像
  • 从节点读取该文件夹中的每个图像文件并生成图像名称列表
  • 使用 webpack DefinePlugin
  • 将图像列表作为全局变量放入您的包中

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

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