node.js - 如何使用 Typescript Express App 渲染 Lit Element Web 组件?
问题描述
我创建了一个 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/控制器/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
我试过托管一个静态文件。前任。索引.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 来构建我的应用程序。我手动将我的静态文件夹复制到构建文件夹中以使用。我不确定是否有一种自动方法可以在构建时复制此文件夹。
我的编译器是否有什么问题可能会给我错误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 文件
推荐阅读
- php - 面向对象的 PHP 程序中的自动加载问题
- python - 在内部 pypi 索引上找不到包
- node.js - 如何解决使用 terraform 部署 Lambda 函数时出现“归档文件错误:访问被拒绝”的问题?
- javascript - 有没有办法使用 Frida 或任何其他工具通过您自己的参数调用 IOS 应用程序中的方法?
- python - 如何拆分具有固定长度列的字符串并用十进制数字替换其中的数字
- python - Selenium Chrome 网络驱动程序提示下载
- dns - ?all -all 和 ~all 在 DNS (spf) 配置中
- c++ - LNK1104:无法打开文件 'C:\Program Files (x86)\Windows Kits\10\\lib.obj'
- python - 使用python从数据框中提取每个班次(白天和黑夜)的最后一行
- dax - 计算列的 DAX,显示与表格模型中的父级相比的相对值