litelement - 构建和捆绑包含资产的 Web 组件答案

【问题标题】：litelement - building and bundling a webcomponent that includes assetslitelement - 构建和捆绑包含资产的 Web 组件
【发布时间】：2019-08-14 20:07:26
【问题描述】：

我正在使用 litelement 构建一个 Web 组件。我从以下 repo 开始，它是项目设置的样板，包括作为捆绑器的汇总。

https://github.com/PolymerLabs/lit-element-build-rollup

我能够构建一个组件并使用它。现在我想构建一个包含图像的组件。我不知道如何处理这个。我不希望组件的消费者将图像路径作为属性传递。图像应与组件捆绑在一起。

mycomponent.js:

import {html, LitElement, css} from 'lit-element';
import logo from "./assets/mylogo.png";

class MyComponent extends LitElement {

    static get styles() {

        return [
            css`
            :host {
                display: block;
            }
            `,
        ];
    }

    render() {
        return html`
            <div class="container">
                <p>lorem ipsum</p>
                <img src={ {logo} } />
                <p>hello</p>
            </div>
        `;
  }
}

customElements.define('my-component', MyComponent);

我的 VSCode 编辑器说，我没有使用我在第 2 行中导入的 logo。当我在构建组件后尝试使用该组件时，图像没有出现，并且看起来像是在错误地寻找它路径。

我添加了https://github.com/rollup/rollup-plugin-image插件，并在rollup.config.js中进行了配置，如下所示：

import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import image from 'rollup-plugin-img';

export default ['MyComponent'].map((name, index) => ({

    input: `src/components/${name}.js`,
    output: {
        // file: 'build/index.js',
        format: 'iife',
        sourcemap: true,
        name,
        dir: 'build/public'
    },
    plugins: [
        postcss({
            extensions: ['.css'],
        }),
        resolve(),
        commonjs(),
        babel(),
        image({
            output: `build/public/assets`,
        })
  ]

}));

有没有人有将资产（即图像）捆绑到 Web 组件中的示例？

【问题讨论】：

标签： web-component rollupjs lit-element

【解决方案1】：

rollup-plugin-image 将导入的图像文件加载为 base64，并提供一个 HTMLImageElement 作为默认导出，并在 src 属性中内联内容（请参阅here）。

在这里，您在 src 中插入整个图像元素（此外，模板文字插值是错误的：应该是 ${}，而不是 {{}}）。

<img src={ {logo} } />

尝试对图像本身进行插值：

${logo}

另外，图片插件似乎没有output 设置：

// rollup.config.js

image({
  output: `build/public/assets`, <-- this has no effect
})

接受的选项是include 和exclude（要包含或忽略的文件的小匹配模式或小匹配模式数组）。如果您想接受所有图像类型，请将其留空：

image()

图片插件问题

此时，除了rollup -c 命令因此错误而失败之外，一切都应该没问题：

[!] Error: 'default' is not exported by ./assets/mylogo.png

这是一个已知的插件issue，用于最近版本的汇总，已为其打开 PR。在他们决定合并之前，您可以使用工作分叉：

$ npm uninstall rollup-plugin-image
$ npm i -D @timdp/rollup-plugin-image

// rollup.config.js
import image from 'rollup-plugin-image' --> '@timdp/rollup-plugin-image';

【讨论】：

感谢@Umbo 提供详细信息。没错，我应该将图像值写为${logo}。我刚刚意识到我在描述中提到了错误的汇总插件。我实际上正在使用rollup-plugin-img (github.com/alwaysonlinetxm/rollup-plugin-img)。这就是为什么我的配置有一个output 选项。
现在我的问题是捆绑一些演示 html 文件。如您所见，我的汇总配置正在捆绑我的组件 (src/components/<component-name>.js) 和图像。我还有一些要复制到build 目录的演示html 文件。在这些 html 文件中，我的组件不会渲染图像，因为它正在寻找相对于演示文件所在位置的图像，而不是相对于组件源所在的位置。我是否也需要使用汇总处理我的演示 html 文件？
您是在正确地为build 目录提供服务还是只是从文件系统中打开了html 文件？
是的，我正在为构建目录提供服务；不直接打开 html 文件。
好的，浏览器为失败的请求提供的确切错误日志是什么？哦 - 只是为了确定 - 你写了“我应该将图像值写为${logo}”但是如果插件是rollup-plugin-img你是完全正确的，这是正确的做法：<img src=${logo} />（不仅仅是@ 987654350@).

【解决方案2】：

最简单的解决方案是制作 PNG 的 base64 编码版本并将其放入 <img src="data:image/gif;base64,.....">，当然您需要正确的图像 mime 类型，但这样图像会嵌入到组件中。

【讨论】：