У меня есть библиотека компонентов, которая будет поставляться с несколькими небольшими активами (изображениями). Эти активы импортируются в различные компоненты библиотеки.
Сценарий сборки использует babel (без веб-пакета) для переноса js(x) в каталог сборки и в настоящее время выгружает образы в build/assets/images.
Это работает при тестировании сборки, но при использовании компонента в другом проекте (с использованием веб-пакета) компонент пытается сослаться на папку node_modules:
Пример компонента:
import myImage from './assets/images/myImage.png';
const MyComponent = () => (
<img src={myImage} />
);
export MyComponent;
Использование:
import MyComponent from 'myLibrary/MyComponent';
export default () => (
<MyComponent />
);
Сообщение об ошибке:
myImage.png:1 ПОЛУЧИТЬ http://localhost:9001/node_modules/myLibrary/assets/images/myImage.png 404 (не найдено)
Насколько я понимаю, «лучший» способ включения активов — использовать загрузчик URL-адресов, чтобы они были преобразованы в данные uri. Однако попытка использовать загрузчик URL без Webpack не работает:
Babel.config.js
...
plugins: [
[
"url-loader",
{
"extensions": ["png", "jpg", "jpeg", "gif", "svg", "pdf"],
"limit": 0
}
]
]
...
Ошибка: не удается найти модуль «babel-plugin-url-loader»