Возникли проблемы с разрешением модуля webpack

Question

У меня установлен глобальный модуль npm, назовем его abc-cli. Теперь у меня есть реакция app, которая запускается с этой командой: abc-cli run.

Что в основном делает abc-cli, так это получает компоненты в app, компилирует и запускает его вместе с его источником.

Теперь я хочу опубликовать этот app как отдельный модуль npm. Поэтому я использую Webpack для генерации пакета. При разрешении модулей веб-пакет не может разрешить модули, входящие в abc-cli. Это очевидно, веб-пакет понятия не имеет, что такое abc-cli.

Итак, мой вопрос: как мне убедиться, что веб-пакет разрешает зависимости модулей? Можно ли как-нибудь заставить веб-пакет запустить / скомпилировать abc-cli во время связывания.

Или в худшем случае может быть, как подавить предупреждение о разрешении модуля или игнорировать эти модули. Потому что я знаю, что он будет присутствовать.

Пример:

В моем app оператор импорта выглядит как

import SomeComponent from '@abc/components';

Теперь при объединении пакет не разрешит этот модуль:

Module not found: Error: Can't resolve '@abc/components' in '/home/shishir/app/src/shared/visualizations'

Было бы здорово помочь, если бы я мог обойти это.

Моя конфигурация веб-пакета:

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'index.js',
    libraryTarget: 'commonjs2'
  },
  resolve: {
    extensions: ['.mjs', '.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        include: path.resolve(__dirname, 'src'),
        exclude: /(node_modules|bower_components|build)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              'es2015',
              'react',
              'stage-2'
            ]
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" }
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  },
  externals: {
    'react': 'commonjs react'
  }
};

Я попробовал null-загрузчик :

{
        test: require.resolve("@abc/components"),
        use: 'null-loader'
}

но это не помогло.

Answer 1

Это два способа сообщить веб-пакету о дополнительном местоположении для поиска модуля.

// webpack.config.js

module.exports = {
  //...
  resolve: {
    // 1. add extra `node_modules` directory to search path
    modules: ['node_modules', '/abs_path/to/global/node_modules'],
    // 2. use alias to explicitly map a module name to its exact location
    alias: {
      '@abc': '/abs_path/to/global/node_modules/@abc'
    }
  }
};

Для вашего случая использования, если у вас есть только @abc модуль, сидящий вне обычного локального node_modulesкаталог, я бы порекомендовал вам использовать resolve.alias.

Источник: https://webpack.js.org/configuration/resolve/#resolvemodules.

Answer 2

Если вы делаете импорт следующим образом:

import SomeComponent from '@abc/components';

Вы говорите Webpack импортировать модуль с именем @abc/components из его «разрешения корня». Этот корень разрешения обычно 'node_modules' . (Представьте, если бы @abc/components был пакетом npm, он бы работал нормально.)

Поскольку вы получили эту библиотеку из другого источника через инструмент командной строки, у вас будут эти зависимости в другом месте. Webpack волшебным образом не распознает их, но у вас есть несколько простых опций:

1. Сделать abc-cli копировать файлы компонентов abc в app node_modules/@abc.
2. Создайте символическую ссылку в app node_modules с именем @abc, которая указывает на папку abc. Webpack по умолчанию перебирает символические ссылки , и это экономит ваше время на копирование файлов каждый раз. Немного лучшее решение IMO, особенно если abc меняется более одного раза.
3. Скажите веб-пакету также выполнять поиск модулей в папке @abc, а не только node_modules. Вы можете сделать это, используя resolve.modules, как показал Нго Хонг Фук в своем ответе. Но будьте осторожны, когда вы импортируете такие модули, как @abc/components, вы должны указать веб-пакет на каталог на один уровень выше @abc, и, конечно, для этого требуется, чтобы каталог компонента abc назывался * 1036. *.

Answer 3

Вы должны сообщить webpack, где находится этот модуль.Мой проект имеет такую ​​структуру

Пример: я хочу импортировать какой-нибудь файл в папку Helper, мне нужно будет сделать это

import {isDomExist} from "Helper/Util";

Поскольку приведенный ниже код делает это для меня

resolve: {
    modules: [
        path.resolve('./React/js/App'),
        path.resolve('./React/js/App/Modules/Client'),
        path.resolve('./React/js/App/Modules/Adnmin'),
        path.resolve('./node_modules')
    ]
},

Вы можете видеть, что я говорю веб-пакету для разрешения пути, взятого из ./React/js/App.

Итак, папка Helperжить внутри папки приложения Webpack будет знать, где искать.

Ниже приведен мой полный исходный код для вашей ссылки здесь

Пожалуйста, дайте мне знать, если это исправление длявы