Question

是否有一种使用Hugo管道将Typescript编译为JavaScript的方法？我目前正在使用“ hugo服务器”在本地运行我的网站，并希望继续这样做以便实时重新加载并简化运行。但是，现在我需要编译一些打字稿，但找不到任何资源可以证明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'。因此，要解决此问题，您必须在此过程中更改文件。一种方法是利用Hugo的资产捆绑并将其本身捆绑为新文件：

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

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

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

<!-- or -->

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

修改

有一个警告：由于Babel不是捆绑器，并且Hugo的捆绑器似乎不支持JavaScript模块，因此您无法导入模块，并且预期效果与Webpack等捆绑器相同。

但是，这似乎确实是针对雨果https://github.com/gohugoio/hugo/issues/7290的提议。

Answer 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 中你可以有一个导入语句：

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