Javascript 如何获取require.context以使用Craco/withou Craco创建React应用程序？

我试图在运行时通过我的CRA（带Typescript）项目中的

require.context

执行一些require，但我只收到以下类型的错误：

TypeError:\uuuuWebpack\u require\uuuuuuuuu（…）。上下文不是函数

及

关键依赖项：require函数的使用方式无法静态提取依赖项

我在某个地方读到，现在需要通过Babel或重新布线的

cra进行多填充。我已经在使用Craco来减少支持，但我不知道如何将
require.context
添加到我的Craco配置中

有人知道怎么做吗

更新：这就是我调用require.context的方式：

const packagesDirectory = path.join(__dirname, '../../../../packages');
const textDataContext = require.context(packagesDirectory, true, /(\w+)\.(\w+)\.(mdx?)/);

更新2:

正如中的一些评论所建议的，我已经尝试向我的应用程序添加
babel plugin require context hook
，如下所示：

// craco.config.js

const CracoLessPlugin = require('craco-less');

module.exports = {
    plugins: [
        {plugin: CracoLessPlugin}
    ],
    babel: {
        plugins: ['require-context-hook']
    }
};

然后我尝试调用
require.context
如下：

// myfile.js

import registerRequireContextHook from 'babel-plugin-require-context-hook/register';
registerRequireContextHook();

const packagesDirectory = path.join(__dirname, '../../../../packages');
const textDataContext = require.context(packagesDirectory, true, /(\w+)\.(\w+)\.(mdx?)/);

但是我得到了这个错误：

TypeError:fs.readdirSync不是函数

Require.context
这是一个网页功能，而不是
cra
或其他功能

那么，为什么它不适用于您的
upd1
或
upd2
，而适用于
upd3
？
答案很简单——因为这里使用了变量。Webpack需要对代码进行静态分析。这意味着，当您编写例如
require.context（'../src/directory/'，true，/.ts$/）
webpack认为hmmm没问题时，我需要递归地在
src/directory
中查找和准备所有
.ts
文件，因为它可以在后续步骤中使用

它不能处理变量，因为
require.context（myPathVariable，true，/.ts$/）
可以是任何内容。Webpack不知道
myPathVariable
在
build
阶段是什么，因为它将仅在
运行时
阶段计算

此规则还与动态导入有关<代码>导入（'../src/keks/index.ts'）

将起作用，

导入（myVar+'../src/keks/index.ts'）

将不起作用

请参阅本文以及有关

require.context

“静态性”的讨论和一些提示

如何使动态路径工作 使用动态路径的一种方法是使用

DefinePlugin

。但是所有的动态路径都应该在

build

阶段（在webpack config或任何node.js脚本中）被知道并计算出来。
示例：

webpack.config.js

module.exports = {
  plugins: [new DefinePlugin({ PACKAGES_DIR: JSON.stringify('path/to/packages') })]
}

然后：

index.ts

---

您可以使用

require.context（PACKAGES\u DIR，true，/\.ts$/）

或

import（PACKAGES\u DIR+'myfile.ts'）

，因为webpack已经知道一些有关此路径的信息。

您正确编写require.context调用了吗？导致此类错误的原因通常是函数调用不正确。提供一些代码。用代码更新问题尝试

import'@babel/polyfill'就像这里谢谢，看起来你是对的！赏金全是你的：）令人沮丧的是，这是多么难搞清楚。我认为
TypeError:\uuuu webpack\u require\uuuu（…）。上下文不是一个函数
错误是由缺少
@types/webpack env
依赖项引起的。哦，上帝，把我从那些设计出难以理解的错误信息的人手中解救出来！