是否可以解析TypeScript的HTML导入文件

Question

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

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

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

.tsx

然后在<link rel="import" href="my-component.html"> ：

my-component.html

我可以在外部使用TypeScript并使用单独的... <template> <style> ... </style> <p>HTML content!</p> </template> <script> // Javascript to create custom element </script> ... 文件，但这有点混乱。我想要做的是用.ts替换my-component.html - 一个看起来几乎相同的文件，但它有TypeScript而不是Javascript，并且转换为my-component.tshtml版本的方式与.html完全相同.ts或.tsx个文件。

有没有办法做到这一点？

Answer 1

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

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