реагировать на ленивую загрузку внешних модулей amd - PullRequest
Новая
       9

реагировать на ленивую загрузку внешних модулей amd

0 голосов
/ 13 марта 2019

У моего приложения реакции есть внешние ресурсы за пределами 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.

Один из файлов в библиотеке lazy загружает класс с помощью 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;
}

Я не изменил ничего из webpack.config.js, за исключением добавления псевдонима и отключения ModuleScopePlugin.

Что еще нужно добавить или изменить в конфигурации для ленивой загрузки модулей amd. 

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

Ответы [ 2 ]

0 голосов
/ 14 марта 2019

Я решил с помощью ContextReplacementPlugin.

Добавлен код ниже для плагинов конфигурации Webpack. 

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

Теперь создается карта со всеми файлами в каталоге servicesи webpackContext загружает файлы при необходимости.

0 голосов
/ 14 марта 2019

Вы увидите babel-loader в возвращаемом объекте webpack.config.js файла.module -> rules array Первый код для запуска линтера 

    {
      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)$/,

Можете ли вы попробовать и проверить?

...