反应延迟加载外部amd模块

Posted 2021-04-09

我的反应应用程序有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是我试图引用的外部库。

外部库是使用requirejs的AMD。

懒惰库中的一个文件使用require加载一个类。

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

以上要求是在运行时从Cannot find module 'xxx'投掷webpackEmptyContext。

当上述代码中的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

答案

您将在babel-loader文件的返回对象中看到webpack.config.js。 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)$/,条目的文件路径

你能试试看吗？

另一答案

我用ContextReplacementPlugin解决了。

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

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

现在创建一个映射，其中包含services目录中的所有文件，webpackContext在需要时加载文件。