使用 Hugo 管道编译打字稿？

Question

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

有什么方法可以让我在编译 Typescript 以在 Hugo 中使用时保持轻松的实时重新加载？

Answer 1

是的。您可以使用 Babel 来完成，就像上面解释的 dmbdesignpdx 一样。

\n

但是，如果您使用 Hugo v0.74.0 或更高版本，则可以通过 ESBuild 更轻松地使用 TypeScript（请参阅 Github 版本信息）。另外，您可以使用 import 语句。

\n

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

\n

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 assets/\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 ts/\n      \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 app/\n         \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 main.ts\n         \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 MyClass.ts\n

\n

您所在的地方：

\n

// MyClass.ts\nexport class MyClass {\n\n  sayHello(s: string) {\n    return `Hello ${s}`;\n  }\n\n}\n

\n

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

\n

// main.ts\nimport { MyClass } from "./MyClass";\n\nlet testInstance = new MyClass();\nconsole.log(testInstance.sayHello("World"));\n

\n

然后您可以在布局中使用该资源，如下所示：

\n

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

\n

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

\n

Answer 2

是的你可以！

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。