如何在 React 或 create-react-app 中列出源文件夹内容？

Question

I'm writing a React app using create-react-app .

Since I can do:

import LocalClass from "./localfolder/LocalClass.js"

and even (using dynamic import ):

import('./localfolder/LocalClass.js').then((module) => { /* ... */ })

is there a way to list localfolder contents, so I can dynamically import the contained files?

The listing should happen at compile or bundling time, not at runtime (I'm thinking about an automatic menu creation feature).

The folder may contain plain classes too (ie not React components); I guess this is a matter of the bundler, but I'm not sure.

Answer 1

由于 CRA 在幕后使用 Webpack，您可以使用require.context()枚举给定路径中的所有可加载模块。

Answer 2

Although it's kind of open-based, after some investigation

I found a lib: react-dynamic-import

Usage:

const loader = f => import(`./dynamic/${f}.js`);

|_ dynamic
|  |_ realComponent-en.js
|  |_ realComponent-eu.js
|  |_ realComponent-kn.js
|_ container.js <-- working file

---

Refer:

• react document code-splitting

• related QA