在LitElement项目中使用@rollup/plugin-image输出svgs以与RollupJS捆绑

Question

我正在使用@rollup/plugin-image来帮助解决我的LitElement项目中的svg导入，推荐如下：https://github.com/rollup/plugins.我还在custom.d.ts中声明了'*. svg'模块，因为我使用的是打字稿。

问题是我不知道如何在rollup的捆绑输出中包含SVG文件，这意味着我的浏览器以后无法导入这些文件，我在控制台中看到401个错误。为了暂时解决这个问题，我只需在需要在自定义LitElement组件的render（）函数中显示SVG的地方使用一个内联SVG标记。请帮我理解我错过了什么。

我当前的（简化的）汇总。配置。js:

// other imports ... 
import image from '@rollup/plugin-image';
const extensions = ['.js', '.ts'];
const commonPlugins = [
  json(),
  commonJS(),
  resolve({ module: true, jsnext: true, extensions }),
  postcss(),
  terser({ keep_classnames: true, keep_fnames: true }),
  **image(),** 
];
const babelPlugins = [
   ...
];
const babelInclude = [
   ...
];
const es6Bundle = {
  input: ['src/bundle/index.es6.ts'],
  output: {
    dir: 'dist/bundle',
    entryFileNames: 'index.js',
    format: 'iife',
    sourcemap: true,
  },
  plugins: [
    babel({
      extensions,
      presets: [
        [
          '@babel/preset-env',
          {
            targets: '>25%',
          },
        ],
        '@babel/typescript',
      ],
      plugins: babelPlugins,
      include: babelInclude,
    }),
    ...commonPlugins, // where image() gets included
  ],
};

export default [es6Bundle];

我的输出目录如下：dist/bundle/wc/*bundle of web组件。js文件*和dist/bundle的内部有索引。js和索引。js。地图

我可能在这里混淆了不同的概念，如果是这样，我道歉。这是我第一次使用rollup和lit元素。

Answer 1

问题是我不知道如何在rollup的捆绑输出中包含SVG文件，这意味着我的浏览器以后无法导入这些文件，我在控制台中看到401个错误

@rollup/plugin image的目的是让您在代码中内联图像，而不是在运行时导入它们，因此浏览器甚至不应该尝试加载它们。。。

应该是这样使用的：

import {html, LitElement, customElement} from 'lit-element';
import myImage from './image.svg';

@customElement('my-test')
export class MyTest extends LitElement {

  render() {
    return html`
      <img src="${myImage}">
      // Or like this, if the `dom` option
      // of the plugin is set to true:
      ${myImage}
    `;
  }

}

但是，如果可以的话，我不建议将SVG内联为base 64：与其他图像格式不同，它可以与超文本标记语言完全互操作，那么为什么要增加它的大小呢？有关此主题的更多信息，请参阅此处。

您可能想看看其他插件，例如rollup-plugin-svg，它允许您将SVG捆绑为标记。