#babeljs #urlloader
#babeljs #urlloader
Вопрос:
У меня есть библиотека компонентов, которая будет поставляться с несколькими небольшими ресурсами (изображениями). Эти ресурсы импортируются в различные компоненты библиотеки.
Сценарий сборки использует babel (без webpack) для переноса js (x) в каталог сборки и в настоящее время сбрасывает изображения в build / assets / images.
Это работает при тестировании сборки, но при использовании компонента в другом проекте (с использованием webpack) компонент пытается сослаться на папку 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’
Ответ №1:
Я нашел это, и оно работает для файлов PNG и SVG — отлично сработало для того, что мне было нужно!
https://www.npmjs.com/package/babel-plugin-inline-import-data-uri