用 Hugo 管道编译打字稿？

Question

有没有办法使用 Hugo 管道将 Typescript 编译为 JavaScript？我目前正在本地使用 "hugo server" 到运行我的站点，并希望继续这样做，以便实时重新加载和简化运行ning。但是，我现在处于需要编译一些打字稿的情况，但我找不到任何表明 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 会将其保存为 'scripts/index.ts' 在您的 public 目录中。因此，要解决此问题，您必须在此过程中更改文件。一种方法是利用 Hugo 的资产捆绑，并将其自身捆绑为一个新文件：

{{ $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 的提议。

Answer 2

是的。你可以像上面解释的 dmbdesignpdx 那样用 Babel 来做。

但是，如果您使用的是 Hugo v0.74.0 或更高版本，则可以通过 ESBuild 更轻松地使用 TypeScript (See Github release info)。另外，您可以使用导入语句。

假设您的资产文件夹中有以下文件夹结构：

├── assets/
    └── ts/
      └── app/
         ├── main.ts
         └── MyClass.ts

你在哪里：

// MyClass.ts
export class MyClass {

  sayHello(s: string) {
    return `Hello ${s}`;
  }

}

在main.ts中你可以有一个导入语句：

// main.ts
import { MyClass } from "./MyClass";

let testInstance = new MyClass();
console.log(testInstance.sayHello("World"));

然后您可以像这样在布局中使用资源：

{{ $js := resources.Get "ts/app/main.ts" | js.Build }}
<script src="{{ $js.Permalink }}" defer></script>

当您在终端中运行 hugo server 时，TypeScript 文件将自动合并并生成一个名为 main.js

的 JavaScript 文件

Compile typescript with Hugo pipes?