[英]How can i deploy nodejs express typescript app to Heroku?
[英]How can I render a Lit Element Web component using Typescript Express App?
我創建了一個Typescript Express服務器:
src / 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}/`);
});
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;
結構體
├───build
│ ├───common
│ ├───components
│ └───controllers
├───src
│ ├───common
│ ├───components
│ └───controllers
└───static
└───images
我曾嘗試托管靜態文件。 例如 index.html。 通過res.send('index.html');
呈現了文件,但無法使用腳本標記導入元素。 由於返回的錯誤Exports is not defined
src / components / 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
}
}
我通過使用webpack捆綁代碼解決了我的問題。 這使我可以創建一個Index.html導入我的bundle.js文件
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.