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

IT技术 reactjs webpack next.js
2021-05-19 22:37:59

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

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

但我得到:

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

我正在使用Nextjs并需要其中一个页面中的文件。这里好像有点不对劲?

编辑:我不一定需要这样做,require我只是希望能够在不知道文件名或文件夹中有多少文件的情况下一次导入/需要多个文件。

3个回答

您可以在 webpack 中尝试以下操作:

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

水珠会返回文件的数组。该数组将包含文件夹中带有.md扩展名的所有文件../static/blog/尽管有一个包,但它不需要安装该包。

尝试使用需要上下文 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$/));

据我了解,您非常接近,从您使用 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