typescript - 是否可以为 TypeScript 解析 HTML 导入文件

Question

我正在使用自定义元素。其中很多（尤其是像 Polymer 这样的库）使用 HTML 导入来加载组件。

大多数元素涉及一些 CSS、一些 HTML 和一些脚本，这些可以是单独.css的 和.js/ .ts，通常在字符串（或 React/Preact.tsx文件）中嵌入 HTML。

使用 HTML 导入有一个更优雅的解决方案：

<link rel="import" href="my-component.html">

然后在my-component.html：

...
<template>
    <style>
        ...
    </style>
    <p>HTML content!</p>
</template>
<script>
    // Javascript to create custom element
</script>
...

我可以在外部使用 TypeScript 和一个单独的.ts文件，但这有点乱。我想要做的是替换my-component.html-my-component.tshtml一个看起来几乎相同的文件，但它具有 TypeScript 而不是 Javascript，并且以与or文件.html完全相同的方式转换为版本。.ts.tsx

有没有办法做到这一点？

Answer 1

我不确定这是不是最好的方法，但我要做的是创建一个脚本：

1. 解析.tshtml文件的<script>内容。
2. 调用 TypeScript 编译器将内容转换为 JavaScript。
3. 注入结果以替换<script>元素内容。
4. 将修改后的文件另存为.html。