URL-загрузчик без веб-пакета?

У меня есть библиотека компонентов, которая будет поставляться с несколькими небольшими активами (изображениями). Эти активы импортируются в различные компоненты библиотеки.

Сценарий сборки использует 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»


person Patrick Dench    schedule 20.02.2021    source источник


Ответы (1)


Я нашел это, и оно работает с файлами PNG и SVG — отлично сработало для того, что мне было нужно!

https://www.npmjs.com/package/babel-plugin-inline-import-data-uri

person Patrick Dench    schedule 20.02.2021