node.js - 启动前从文件夹中读取文件

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

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

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

从 webpack 中，您可以使用所有可用的 Nodejs 功能，但您必须使这些更改对于 web 应用程序是静态的。

一个想法:

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

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

注意:这不是对文件夹中资源的动态读取。如果添加/删除图像，您将被迫重复应用程序的构建过程。