Reactjs 响应延迟加载外部amd模块

我的react应用程序在

src/

之外有外部资源，因此我弹出了

react脚本

并禁用了

ModuleScopePlugin

。 在

resolve.alias

中引用了外部库，并在整个应用程序中使用

resolve.alias: {
  'genlib': path.resolve(fs.realpathSync(process.cwd()), 'lib/genlib/js/src'),
  'config': path.resolve(fs.realpathSync(process.cwd()), 'config/dev'),
  'messages': path.resolve(fs.realpathSync(process.cwd()), 'config/messages')
}

genlib

是我试图引用的外部库

外部库是使用requirejs创建的

库中的一个文件使用require延迟加载一个类

define('class1', ['require', ...], function(require, ...) {
  //
  require([variable], function()...)
});

上述要求是在运行时从

webpacketmptycontext

中抛出

无法找到模块“xxx”

当控制台上的

require

时，将记录下面的代码，而不是require功能困惑为什么

webpackmptycontext

会被安慰出来，而不是

webpackContext

函数

ƒ webpackEmptyContext(req) {
    var e = new Error("Cannot find module '" + req + "'");
    e.code = 'MODULE_NOT_FOUND';
    throw e;
}

除了添加别名和禁用ModuleScopePlugin之外，我没有更改任何

webpack.config.js

还需要在配置中添加或更改什么以延迟加载amd模块

webpack v4.19.1
react-dev-utils v7.0.1

---

您将在

webpack.config.js

文件的返回对象中看到

babel loader

<代码>模块->规则数组第一个代码是运行过梁

    {
      test: /\.(js|mjs|jsx)$/,
      enforce: 'pre',
      use: [
        {
          options: {
            formatter: require.resolve('react-dev-utils/eslintFormatter'),
            eslintPath: require.resolve('eslint'),

          },
          loader: require.resolve('eslint-loader'),
        },
      ],
      include: [
          paths.appSrc,
          'paht/to/external-library/using/requirejs' <---- Add your external file path for loader to parse the AMD files
      ],
    }

{
测试：/\（js | mjs | jsx）$/，
强制执行：“预”，
使用：[
{
选项：{
格式化程序：require.resolve（'react-dev-utils/eslintFormatter'），
eslintPath:require.resolve（'eslint'），
},
loader:require.resolve（'eslint-loader'），
},
],
包括：[
path.appSrc，
“paht/to/external library/using/requirejs”您将在
webpack.config.js
文件的返回对象中看到
babel loader
。
module->rules array
第一个代码是运行linter

    {
      test: /\.(js|mjs|jsx)$/,
      enforce: 'pre',
      use: [
        {
          options: {
            formatter: require.resolve('react-dev-utils/eslintFormatter'),
            eslintPath: require.resolve('eslint'),

          },
          loader: require.resolve('eslint-loader'),
        },
      ],
      include: [
          paths.appSrc,
          'paht/to/external-library/using/requirejs' <---- Add your external file path for loader to parse the AMD files
      ],
    }

{
测试：/\（js | mjs | jsx）$/，
强制执行：“预”，
使用：[
{
选项：{
格式化程序：require.resolve（'react-dev-utils/eslintFormatter'），
eslintPath:require.resolve（'eslint'），
},
loader:require.resolve（'eslint-loader'），
},
],
包括：[
path.appSrc，
“paht/to/external library/using/requirejs”我通过使用
ContextReplacementPlugin
解决了这个问题

在webpack配置插件中添加了以下代码

new webpack.ContextReplacementPlugin(/genlib[\\/]services/, /.*$/),

现在，使用
services
目录中的所有文件创建了一个映射，并且
webpackContext
在需要时加载文件。
我已经使用
ContextReplacementPlugin
解决了这个问题

在webpack配置插件中添加了以下代码

new webpack.ContextReplacementPlugin(/genlib[\\/]services/, /.*$/),

现在，使用
服务
目录中的所有文件创建了一个映射，并且
webpackContext
在需要时加载文件。
我已经尝试过这个。eslint和babel loader的外部库的包含路径。但它仍然抛出相同的错误。您能显示您的解析。别名代码吗？另外，尝试添加libraryTarget:'嗯输出对象中的“d”。我已使用resolve.alias更新了问题。尝试添加libraryTarget:“umd”。无用：（我已尝试此操作。包括eslint和babel loader的外部库路径。但它仍引发相同的错误。能否显示resolve.alias代码？另外，尝试在输出对象中添加libraryTarget:“umd”。我已使用resolve.alias更新了问题。尝试添加libraryTarget:“umd”。没有用：(