如果我将svg文件导入ES6模块,我该如何处理汇总?我目前有这样的事情(我正在做的简单例子):
import next from '../assets/next.svg';
export default () => console.log('Here is some Svg: ! ', next);
我有一个如下所示的汇总配置:
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
export default {
entry: 'src/app.js',
dest: 'build/app.min.js',
format: 'iife',
sourceMap: 'inline',
plugins: [
babel({
exclude: 'node_modules/**',
}),
resolve({
jsnext: true,
main: true,
browser: true,
}),
commonjs(),
],
};
然后我收到以下错误:
无法解析'../assets/next.svg' /home/magnferm/projects/slask/rollup-test/src/chill/index.js
路径没有任何问题,但汇总似乎不知道如何处理svg文件。是否有我可以使用的插件,或者我必须以某种方式对待它?
答案 0 :(得分:1)
当然有一个插件。它被称为 rollup-plugin-image ,它处理.svg导入等其他格式:
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import image from 'rollup-plugin-image';
export default {
entry: 'src/app.js',
dest: 'build/appn.min.js',
format: 'iife',
sourceMap: 'inline',
plugins: [
babel({
exclude: 'node_modules/**',
}),
resolve({
jsnext: true,
main: true,
browser: true,
}),
commonjs(),
image()
],
};