javascript - 如何让 require.context 在有/没有 Craco 的情况下与 Create React App 一起工作？

Question

我试图在运行时通过 require.context 做一些要求在我的 CRA(使用 Typescript)项目中，但我只收到这些类型的错误:

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

和

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

我在某处读到，现在需要通过 Babel 或 cra-rewired 进行填充。 .好吧，我已经在使用 Craco 来启用 Less-support，但我不知道如何添加 require.context到我的 Craco 配置。

有人知道怎么做吗？

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

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

更新 2:

正如 this thread 中的一些评论建议，我尝试添加 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 is not a function

😕

更新 3:

好像是 CRA 支持 require.context ，根本不需要任何 polyfill。但是当它通过导入的模块执行时似乎失败了。在我之前的尝试中，我一直在执行对 require.context 的调用。在 myfile.js (见上文)已由 index.js 导入像这样:

// index.js

import myModules from 'myfile.js';

ReactDOM.render(...);

但是，如果我更改 index.js对此:

// index.js

const something = require.context('../../packages/', true, /(\w+)\.(\w+)\.(mdx?)/);
something.keys().forEach(key => console.log(key));

ReactDOM.render(...);

它就像一个魅力! 为什么？!

Answer 1

Require.context它是一个 webpack 特性，而不是 cra或者是其他东西。

那么为什么它不适用于您的 upd1或 upd2它与 upd3 ?

答案很简单——因为这里使用了变量。 Webpack 需要你的代码是可静态分析的。这意味着当你写例如 require.context('../src/directory/', true, /.ts$/) webpack 认为 hmmm OK 我需要找到并准备所有 .ts src/directory 中的文件递归，因为它可以在进一步的步骤中使用。

它不能与变量一起使用，因为 require.context(myPathVariable, true, /.ts$/)可以是任何东西。 Webpack 不知道是什么 myPathVariable在 build相位，因为它将在 runtime 处计算仅相。

这条规则也是关于 dynamic imports . import('../src/keks/index.ts')将工作，import(myVar + '../src/keks/index.ts')将不会。

请看这个issue关于require.context 的讨论和一些提示“静态”。

如何让动态路径工作

使用动态路径的一种方法是使用 DefinePlugin .但是您的所有动态路径都应该是已知的并在 build 处计算。阶段(在 webpack 配置或任何 node.js 脚本中)。
例子:webpack.config.js

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

接着: index.ts您可以使用 require.context(PACKAGES_DIR, true, /\.ts$/)或 import(PACKAGES_DIR + 'myfile.ts')因为 webpack 已经对这条路径有所了解。