node.js - Typescript Express Uygulaması kullanarak bir Lit Element Web bileşenini nasıl render edebilirim?

Bir Typescript Express Sunucusu oluşturdum:

src/sunucu.ts

    import express from "express";

    import { HomeController } from "./controllers";

    const app: express.Application = express();
    const port: number = ((process.env.PORT as any) as number) || 3000;

    app.use(express.static("static"));

    app.use("/", HomeController);

    app.listen(port, () => {
      // tslint:disable-next-line:no-console
      console.log(`Listening at http://localhost:${port}/`);
    });

src/controllers/index.ts

    import { Request, Response, Router } from "express";

    const router: Router = Router();

    router.get("/", (req: Request, res: Response) => {
      res.send("Hello World");
    });

    export const HomeController: Router = router;

yapı

    ├───build
    │   ├───common
    │   ├───components
    │   └───controllers
    ├───src
    │   ├───common
    │   ├───components
    │   └───controllers
    └───static
        └───images

Statik bir dosya barındırmayı denedim. Örn. index.html. res.send('index.html'); ile. Dosya render ediliyor ama bir script etiketi kullanarak elemanı içe aktaramıyorum. Döndürülen hata Exports is not defined

src/bileşenler/kart.ts

    import { html, LitElement } from "lit-element";

    class Card extends LitElement {
      protected render() {
        return html`
          <img src="../../static/images/AS.png" />
        `;
      }
    }

    declare global {
      interface HTMLElementTagNameMap {
        "card-element": Card;
      }
    }

    customElements.define("card-element", Card);

Uygulamamı oluşturmak için TSC kullanıyorum. Kullanmak için statik klasörümü manuel olarak build klasörüme kopyaladım. Bu klasörü build sırasında otomatik olarak kopyalamanın bir yolu olup olmadığından emin değilim.

Compilerımla ilgili olarak Exports is not defined hatası alıyor olmamın nedeni yanlış bir şey yapıyor olmam mı? Araştırmalar bunun CommonJs ile ilgili bir şey olduğunu söylüyor ama yüklemeyi denedim ve sonuç değişmedi.

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": ["es6", "dom"],
    "outDir": "./build",
    "strict": true,
    "moduleResolution": "node",
    "typeRoots": ["./modules"],
    "esModuleInterop": true,
    "skipLibCheck": true
  }
}

Cevap #1

Sorunumu kodumu webpack kullanarak paketleyerek çözdüm. Bu, bundle.js dosyamı içeren bir Index.html oluşturabilmemi sağladı.