向全局变量中添加lit-element和lit-html

Question

我的页面上有几个lit元素，但我不能将它们全部编译在一起，所以我想通过一个全局变量来“分享”lit内容。这可能有点不合常规，但现在它会为我节省很多字节。

我正在使用rollup进行打包。

我想我离实现我想要的已经很近了，但是我错过了一些东西…

这是我的组件..

@customElement('tab-strip')
export class TabStrip extends LitElement {

结果是

var tabstrip = (function (exports, litElement, repeat, classMap) { 
//SOME OTHER STUFF

  exports.TabStrip = class TabStrip extends litElement.LitElement {...
.
.
.
${repeat.repeat(this._tabs, e => litElement.html
  

}({}, Globals, Globals.repeat, Globals.classMap))

我已经创建了一个Globals.ts文件，如下所示。

import { customElement, html, LitElement, property } from "lit-element";
import { Template, TemplateResult } from "lit-html";
import { classMap } from "lit-html/directives/class-map";
import { repeat } from "lit-html/directives/repeat";

class Globals {
    public html = html;
    public LitElement = LitElement;
    public customElement = customElement;
    public property = property;
    public repeat = repeat;
    public classMap = classMap;
    public Template = Template;
    public TemplateResult = TemplateResult;

}
window["Globals"] = new Globals();

最后是我的rollup.config

input: inputDir + name + ".ts",
output: {
    file: outputDir + name + ".js",
    name: name,
    format: format,
    sourcemap: true,
    globals: {
        "lit-element": "Globals",
        'customElement': 'Globals.customElement',
        'lit-html': "Globals.LitHtml",
        'html': "Globals.html",
        'property': "Globals.property",
        'lit-html/directives/repeat': "Globals.repeat",
        'lit-html/directives/class-map': 'Globals.classMap',
        'Template': 'Globals.Template',
        'TemplateResult': 'Globals.TemplateResult'
    }
},
plugins: [
    typescript({
        experimentalDecorators: true
    }),
    resolve(),
    // terser({"ecma":"2019"}),
],
external: ['lit-element', 'lit-html', "lit-html/directives/repeat", "lit-html/directives/class-map"]

直觉是我误解了rollup的外部内容..正如您在生成的文件中看到的那样，它显示litElement.LitElement而不只是litElement

有什么帮助吗？？

Answer 1

它对你有效吗？从表面上看，这似乎是正确的。

看看您的Globals是什么，它是一个具有LitElement、property、html等属性的对象。

如果我们看一下您的Globals函数，第二个参数是litElement，它与传入的the对象相匹配。

所以class TabStrip extends litElement.LitElement

这很有意义，因为litElement引用了您的Globals对象，并且该对象具有LitElement属性。