反应延迟加载外部 amd 模块

Question

我的 React 应用程序在 src/ 之外有外部资源，所以我弹出了 react-scripts 并禁用了 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 是我试图引用的外部库。

外部库是AMD使用requirejs。

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

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

以上要求在运行时从 webpackEmptyContext.

抛出 Cannot find module 'xxx'

当上面代码的 require 被控制台时，下面会被记录而不是 require 函数。 困惑为什么 webpackEmptyContext 而不是 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

Answer 1

您将在 webpack.config.js 文件的 return 对象中看到 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文件入口 test: /\.(js|mjs|jsx|ts|tsx)$/,

你能试试看吗？

Answer 2

我已经用ContextReplacementPlugin解决了。

将以下代码添加到 webpack 配置插件。

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

现在使用 services 目录中的所有文件创建了一个地图，并且 webpackContext 在需要时加载文件。

反应延迟加载外部 amd 模块

react lazy load external amd modules

requirejs

reactjs

webpack

create-react-app