如何在汇总中处理SVG导入（ES6）

Question

如果要将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(),
  ],
};

然后我得到以下错误：

无法从/home/magnferm/projects/slask/rollup-test/src/chill/index.js解析“ ../assets/next.svg”

路径没有什么问题，但是汇总似乎不知道如何处理svg文件。 是否有可以用于该目的的插件，还是必须以某种方式对其进行区别对待？

Answer 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()
  ],
};