如何在Vite创建的React项目中获取文件夹内文件名？

为什么fs和list-react-files没用？ #

• fs是Node.js专属模块，只能在服务端环境运行，浏览器端无法直接调用，所以在React组件里用会直接报错。
• list-react-files这类工具大多适配Webpack构建流程，和Vite的模块处理机制不兼容，自然无法正常工作。

正确解决方案：用Vite内置的Glob导入特性 #

Vite原生支持import.meta.glob和import.meta.globEager，可以在前端环境中直接匹配并导入指定目录下的文件，完美适配Vite项目。

方法1：动态导入（适合按需加载场景） #

// 匹配src/data下所有JSON文件
const jsonFiles = import.meta.glob('../data/*.json')

// 提取文件名的异步函数
async function getJsonFileNames() {
  return Object.keys(jsonFiles).map(path => {
    // 从文件路径中剥离出不带后缀的文件名
    return path.split('/').pop().replace('.json', '')
  })
}

// 使用示例
getJsonFileNames().then(names => {
  console.log('JSON文件名列表:', names)
})

方法2：同步导入（适合文件数量较少的场景） #

// 同步加载src/data下所有JSON文件
const jsonFiles = import.meta.globEager('../data/*.json')

// 直接提取文件名
const jsonFileNames = Object.keys(jsonFiles).map(path => {
  return path.split('/').pop().replace('.json', '')
})

console.log('JSON文件名列表:', jsonFileNames)

在React组件中集成使用 #

import { useState, useEffect } from 'react'

export default function JsonFileList() {
  const [fileNames, setFileNames] = useState([])

  useEffect(() => {
    // 组件挂载时获取文件名
    const files = import.meta.glob('../data/*.json')
    const names = Object.keys(files).map(path => path.split('/').pop().replace('.json', ''))
    setFileNames(names)
  }, [])

  return (
    <div>
      <h3>src/data下的JSON文件:</h3>
      <ul>
        {fileNames.map(name => (
          <li key={name}>{name}</li>
        ))}
      </ul>
    </div>
  )
}

注意事项 #

• 路径要对应当前文件位置：比如组件在src/components/目录下，访问src/data/需用../data/*.json；如果文件在项目根目录，直接用src/data/*.json。
• 递归匹配子目录：若要包含src/data/下所有子目录的JSON文件，把匹配规则改成../data/**/*.json。
• 构建时会打包匹配文件：确保src/data/下的JSON文件未被.gitignore或Vite配置排除，否则会被跳过。

内容的提问来源于stack exchange，提问作者enderrobber101