url-loader without webpack?

Question

我有一个组件库，它将与一些小资产(图像)一起发布。这些资产被导入到库中的各种组件中。

构建脚本使用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 GET http://localhost:9001/node_modules/myLibrary/assets/images/myImage.png 404(未找到)

据我所知，包含资产的"最佳"方式是使用url加载器，以便将它们转换为数据uri。但是，尝试使用没有Webpack的url加载器是不工作的:

babel.config.js

...
plugins: [
[
"url-loader",
{
"extensions": ["png", "jpg", "jpeg", "gif", "svg", "pdf"],
"limit": 0
}
]
]
...

错误:Cannot find module 'babel-plugin-url-loader'

Answer 1

我发现这个，它适用于PNG和SVG文件-完美地为我所需要的!

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