typescript - 用 Hugo 管道编译 typescript ？

Question

有没有办法使用 Hugo 管道将 Typescript 编译为 JavaScript？我目前正在使用“hugo server”在本地运行我的网站，并希望继续这样做以实现实时重新加载和易于运行。但是，我现在处于需要编译一些 typescript 的情况，但我找不到任何表明 Hugo 能够做到这一点的资源。

在编译用于 Hugo 的 Typescript 时，有什么方法可以让我的实时重新加载变得容易？

Answer 1

是的你可以!
Hugo 使用 Babel 编译 JavaScript，通过 Babel 你也可以编译 TypeScript。如果你还没有，你需要安装一些 Babel 包供 Hugo 使用:

@babel/core @babel/cli @babel/preset-env

你还需要 Babel 的 TypeScript 包:

@babel/preset-typescript

设置你的 Babel 配置文件(Hugo 会查找 babel.config.js，但你可以根据需要更改它):

module.exports = {
  "presets": [
    "@babel/preset-typescript",
    "@babel/preset-env",
  ],
}

现在 Hugo 可以使用 babel 管道通过 Babel 成功编译 TypeScript:

{{ $typescript := resources.Get "scripts/main.ts" | babel }}

问题是 Hugo 会在你的公共(public)目录中将它保存为“scripts/index.ts”。因此，要解决此问题，您必须在此过程中更改文件。一种方法是利用 Hugo 的 Assets 捆绑并将其自身捆绑为一个新文件:

{{ $javascript := slice $typescript | resources.Concat "scripts/main.js" }}

最后，您可以使用该资源:

<script src='{{ $javascript.RelPermalink }}'></script>

<!-- or -->

<script>{{ $javascript.Content | safeJS }}</script>

编辑
有一个警告:由于 Babel 不是捆绑器，而且 Hugo 的捆绑器似乎不支持 JavaScript 模块，因此您无法导入模块并获得与 Webpack 之类的捆绑器相同的预期结果。
然而，看起来这确实是目前针对 Hugo https://github.com/gohugoio/hugo/issues/7290 的提议。 .