在React / Nextjs的文件夹中导入多个文件

wdebmtf2  于 2022-12-12  发布在  React
关注(0)|答案(4)|浏览(170)

我正在尝试导入文件夹中具有特定扩展名的多个文件:

const allEntries = require.context('../static/blog', true, '/\.md/')

但我得到的是

Unhandled Rejection (TypeError): __webpack_require__(...).context is not a function

我正在使用Nextjs,并需要其中一个页面中的文件。这里似乎有什么问题?

  • 编辑:* 我不一定需要通过require这样做,我只是想能够一次导入/需要多个文件,而不知道文件名或文件夹中有多少个文件。
uajslkp6

uajslkp61#

您可以在webpack中给予以下内容:

const glob = require('glob');
const allEntries = glob.sync("../static/blog/*.md");

glob将返回一个文件数组。该数组将包含../static/blog/文件夹中所有扩展名为.md的文件。即使有一个软件包,也不应要求安装该软件包。

0x6upsns

0x6upsns2#

尝试使用需要上下文npm库。
$ npm i --save require-context
在您的档案中:

// Load globally into all modules.
require('require-context/register')

// Load locally as a function.
var requireContext = require('require-context');

function requireAll(r) { r.keys().forEach(r); } 

requireAll(requireContext('../static/blog', true, /\.md$/));
zpjtge22

zpjtge223#

据我所知,你非常接近,从错误,你是使用webpack的require.context

const allEntries = require.context('../static/blog', true, '/\.md/')
console.log(allEntries.keys()) // all the files found in the context
allEntries.keys().forEach(allEntries) // require them all
b0zn9rqh

b0zn9rqh4#

const imageDirectory = path.join(process.cwd(), '/public/dirname');
const imageFilenames = await fs.readdir(imageDirectory)
// Store the file names in an array and use it.

webpack.要求基本上是使用webpack,确保你使用的是webpack

相关问题