Как избежать повторной загрузки дважды с помощью Webpack при разработке

Учитывая следующую структуру каталогов:

my-project
|
|-- node_modules
    |
    |-- react
    |-- module-x
        |
        |--node_modules
            |
            |--react

Вы можете увидеть как my-project, так и module-x требовать React. У меня такая же проблема, как описано в этом вопросе, но это предложение - удалить ответ из зависимостей package.json. Я делаю это, и он работает нормально, если в module-x не установлен node_modules, потому что Webpack будет использовать React из my-project. Но если я в процессе разработки модуля-x и node_modules установлены, Webpack использует React как из my-project, так и module-x.

Есть ли способ заставить Webpack убедиться, что используется только один экземпляр React, хотя он необходим на двух разных уровнях?

Я знаю, что могу поддерживать module-x в отдельном каталоге при разработке, но мне кажется, что я должен опубликовать его, а затем установить его в my-project > проверить его, и это не очень эффективно. Я думал о npm link, но не повезло с ним, так как у него все еще есть node_modules, установленный в module-x.

Это здесь звучит очень похоже на тот же самый вызов, который у меня есть, но это не похоже на npm dedupe или вариант Webpack dedupe должно сработать. Возможно, я не понимаю некоторых важных деталей.

Ответ 1

Эта проблема обычно возникает при использовании npm link. Связанный модуль будет разрешать свои зависимости в своем собственном дереве модулей, который отличается от того, который требуется для модуля. Таким образом, команда npm link устанавливает peerDependencies, а также dependencies.

Вы можете использовать resolve.alias, чтобы заставить require('react') разрешить вашу локальную версию React.

resolve: {
  alias: {
    react: path.resolve('./node_modules/react'),
  },
},

Ответ 2

Если вы не хотите (или не можете) изменить конфигурацию проекта, существует более простое решение: просто npm link Верните себя обратно в свой проект:

# link the component
cd my-app
npm link ../my-react-component

# link its copy of React back to the app React
cd ../my-react-component
npm link ../my-app/node_modules/react