В React, Как напрямую импортировать компонент из комплекта веб-пакета?

Question

В нормальных условиях мы импортируем компонент из другого файла JavaScript.Однако в моем проекте я хочу импортировать компонент из комплекта, созданного webpack.

Шаг 1: Создание пакета папки ABC с именем abc.bundle.js

Примечание. В папке ABC есть файлы a.js, b.js, c.js и содержит компоненты a, b, c соответственно

Шаг 2: Внутри папки DEF запишите файл DEF.js следующим образом

Примечание. Импорт «a»компонент из a.js работает нормально

import react from 'react'
import a from './abc/a.js'

Шаг 3: Внутри папки DEF запишите файл DEF.js следующим образом

Примечание: При импорте компонента "a" из abc.bundle.js, выдается ошибка

import react from 'react'
import a from 'abc.bundle.js'

По мнению меня и моей команды, мы можем импортировать компонент из комплекта.потому что

 1) The bundle is a js file, and we can import one code from one js file to another
 2) Node modules packages are also get created by webpack, and we can import functionalities from that package.

Answer 1

https://webpack.js.org/configuration/target/

Webpack предоставляет различные цели для объединения.В зависимости от того, как вы сконфигурируете конфигурацию вашего веб-пакета, вы можете использовать файлы комплекта в разных средах.

Я считаю, что целью вашего комплекта является web, так как он используется по умолчанию.Чтобы сделать его пригодным для использования в среде Node, вам нужно установить цель на node

Answer 2

Вам необходимо скомпилировать папку abc как автономный библиотечный модуль с Webpack, а затем вы можете импортировать ее.Затем вы можете либо опубликовать его в npm, и использовать его как любой другой сторонний модуль, либо просто опубликовать его в папке в вашем родительском проекте (возможно, с использованием структуры monorepo).

Webpack library иlibraryTarget варианты, на которые стоит обратить внимание:

https://webpack.js.org/configuration/output/#output-library https://webpack.js.org/configuration/output/#output-librarytarget

В качестве альтернативы есть инструменты, которые помогут вам в этом:

https://github.com/insin/nwb

Например

https://github.com/insin/nwb/blob/master/docs/guides/ReactComponents.md#developing-react-components-and-libraries-with-nwb