Question

我已经创建了Typescript Express服务器：

src / server.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;

src / controllers / index.ts

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

结构

res.send('index.html');

我曾尝试托管静态文件。例如index.html。通过Exports is not defined呈现了文件，但是我无法使用脚本标签导入元素。由于返回的错误是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);

src / components / card.ts

Exports is not defined

我正在使用TSC来构建我的应用程序。我将静态文件夹手动复制到build文件夹中以供使用。我不确定是否可以在构建时自动复制此文件夹。

我的编译器有问题吗，可能会给我带来错误{ "compilerOptions": { "target": "es5", "module": "commonjs", "lib": ["es6", "dom"], "outDir": "./build", "strict": true, "moduleResolution": "node", "typeRoots": ["./modules"], "esModuleInterop": true, "skipLibCheck": true } }，研究表明这与CommonJs有关，但是我尝试安装，结果没有改变

tsconfig.json

trait SharedBehavior{

    def supportsCoolFeature(){
//Testing happens here
    }

    def doesNotSupportCoolFeature(){
//Testing happens here
    }
}

Answer 1

我通过使用webpack捆绑代码解决了我的问题。这使我可以创建一个Index.html导入我的bundle.js文件

如何使用Typescript Express App呈现Lit Element Web组件？

1 个答案: