将lit元素和lit html添加到全局变量中

Question

我的页面上有几个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"]

直觉是我误解了一些外在的东西。。正如你在生成的文件中看到的那样，它显示litElement.LitElement，而不仅仅是litElement

有什么帮助吗？？

Answer 1

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

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

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

所以class TabStrip extends litElement.LitElement

这是有意义的，因为litElement引用的是Globals对象，并且它具有LitElement属性。