用 Hugo 管道编译打字稿？答案

【问题标题】：Compile typescript with Hugo pipes?用 Hugo 管道编译打字稿？
【发布时间】：2021-07-05 13:25:52
【问题描述】：

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

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

【问题讨论】：

【解决方案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”在您的公共目录中。因此，要解决此问题，您必须在此过程中更改文件。一种方法是利用 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 的提议。

【讨论】：

【解决方案2】：

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

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

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

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

你在哪里：

// MyClass.ts
export class MyClass {

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

}

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

// 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 文件

【讨论】：