Как я могу визуализировать веб-компонент Lit Element, используя приложение Typescript Express? - PullRequest
Новая
       29

Как я могу визуализировать веб-компонент Lit Element, используя приложение Typescript Express?

1 голос
/ 19 июня 2019

Я создал сервер Typescript Express:

ЦСИ / server.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}/`);
    });

ЦСИ / Контроллеры / 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;

структура 

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

Я попытался разместить статический файл. Ex. index.html. via res.send('index.html'); Файл отображается, но я не могу импортировать элемент с помощью тега script. Поскольку ошибка возвращается Exports is not defined

SRC / компоненты / card.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);

Я использую TSC для создания своего приложения. Я вручную скопировал свою статическую папку в папку build для использования. Я не уверен, есть ли автоматический способ скопировать эту папку при сборке.

Есть ли что-то, что я делаю неправильно с моим компилятором, который может выдавать мне ошибку Exports is not defined исследование говорит, что это как-то связано с CommonJs, но я попытался установить, и результат не изменился

tsconfig.json 

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

1 Ответ

0 голосов
/ 20 июня 2019

Я решил свою проблему, связав код с помощью веб-пакета. Это позволило мне создать Index.html, импортировав мой файл bundle.js

...