是否可以为 TypeScript 解析 HTML 导入文件答案

【问题标题】：Is it possible to parse an HTML import file for TypeScript是否可以为 TypeScript 解析 HTML 导入文件
【发布时间】：2017-04-28 06:02:03
【问题描述】：

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

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

使用 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>
...

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

有什么办法吗？

【问题讨论】：

@Supersharp - 所以我的编译时 TS 在运行时由服务器解析？这首先违背了拥有 TS 的意义。如果我要走这条路，我会有一个常规的.ts 文件，然后有一个构建后步骤将其插入.html 文件，但我在问题中提到的那一点是混乱的。我正在寻找更好的方法。
一点也不。我想说我不明白你的问题，但我看到我的评论更糟，所以我会删除它！您是否正在寻找类似stackoverflow.com/questions/14015899/… 的工具？
@Supersharp 不是真的 - 该问题（和所选操作）正在寻找运行时 TypeScript 编译。这在某种程度上违背了 TypeScript 的意义，并且对于 HTML 导入毫无用处，因为它们的全部意义在于将 HTML、CSS 和脚本组合到一个快速下载中——额外的解析步骤和库会完全削弱它。
好的，所以你要找的是一个解析器，它会在编译时从内联打字稿生成内联 JavaScript，不是吗？如果是这样，解决方法可能是使用诸如 gulp/grunt 之类的后期构建工具将 HTML、CSS、JS 连接到单个 HTML 文件中。
@Supersharp 是的，就是这样。我可以添加后期构建命令行的东西来做到这一点，但这很混乱并且会破坏地图文件。我想知道最好的方法是什么。

标签： typescript custom-element html-imports

【解决方案1】：

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

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

【讨论】：

是的，我正在考虑编写一个 gulp 任务来做到这一点（如果我这样做了，我会分享它）但我不想重新发明轮子。
也许你可以在cmets的链接中找到一些有用的代码。即使库是客户端的，某些部分也可以在服务器端重用……祝你好运！