开始前从文件夹中读取文件
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 个图像,您将被迫重复应用程序的构建过程。
我想从我的项目 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 个图像,您将被迫重复应用程序的构建过程。