В React, как напрямую импортировать компонент из пакета webpack?
В нормальном состоянии мы импортируем компонент из другого файла 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.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вам нужно скомпилировать папку abc как автономный библиотечный модуль с Webpack, а затем вы можете импортировать его. Затем вы можете либо опубликовать его в npm и использовать как любой другой сторонний модуль, либо просто опубликовать его в папке в вашем родительском проекте (возможно, используя структуру monorepo).
Стоит обратить внимание на варианты Webpack library и libraryTarget:
https://webpack.js.org/configuration/output/#output-libraryhttps://webpack.js.org/configuration/output/#output-librarytarget
В качестве альтернативы есть инструменты, которые помогут вам в этом:
Например.
Я установил целевую библиотеку вывода как 'var' и теперь хочу импортировать ее с помощью scriptjs. Не могли бы вы сказать мне, как импортировать этот компонент, который я могу импортировать и распечатать, а также печатает объект, но не могу его использовать.
То же самое здесь ... установите цель как 'var', импортированный js-скрипт пакетов в клиентском приложении, способный распечатывать объект и даже вызывать функции из пакета, но не может отображать компоненты React из него. Кто-нибудь понял это?
https://webpack.js.org/configuration/target/
Webpack предоставляет разные цели для объединения. В зависимости от того, как вы настраиваете конфигурацию своего веб-пакета, вы можете использовать файлы пакета в разных средах.
Я считаю, что целью вашего пакета является web, поскольку он используется по умолчанию. Чтобы его можно было использовать в среде Node, вам необходимо установить цель на node.
Вы нашли способ загрузить компоненты из пакетов веб-пакетов?