Как настроить таргетинг на "Основной" скрипт, а не на "Модульный" скрипт в Webpack?

#javascript #node.js #webpack

#javascript #node.js #веб-пакет

Вопрос:

Я столкнулся с проблемой сборки в большом проекте, которую я могу воспроизвести в чрезвычайно упрощенном примере:

Учитывая базовый проект webpack (с начала работы):

 [webpack]: ls
node_modules            package.json
package-lock.json       src

[webpack]: ls src
index.js

Если я попытаюсь импортировать пакет, в котором есть «модуль», указанный в package.json (для которого я не могу найти ссылку в https://docs.npmjs.com/cli/v6/configuring-npm/package-json ), как @szhsin/реагировать-меню (https://github.com/szhsin/react-menu/blob/master/package.json#L9-L10 ), затем Webpack пытается импортировать это вместо «основного» скрипта!

Пример

 // src/index.js
import '@szhsin/react-menu'

 [webpack]: npx webpack
[webpack-cli] Compilation finished
assets by status 33.4 KiB [cached] 1 asset
orphan modules 42.2 KiB [orphan] 1 module
./src/index.js   1 modules 42.2 KiB [built] [code generated]

ERROR in ./node_modules/@szhsin/react-menu/dist/index.modern.js 1:0-122
Module not found: Error: Can't resolve 'react' in '/Users/delong/dev/webpack/node_modules/@szhsin/react-menu/dist'
 @ ./src/index.js 1:0-27

Примечание: он пытается импортировать dist/index.modern.js , а не dist/index.js !

Как мне нужно настроить Webpack, чтобы по умолчанию импортировать «основной» скрипт?

Ответ №1:

Просто используйте полный путь:

 import '@szhsin/react-menu/dist/index.js'

1. Это интересное решение. Простой, понятный. Теперь мне остается любопытно, каковы недостатки (кроме ввода большего количества символов).

2. Это нарушит вашу сборку, как только они изменят путь dist/index.js .