JavaScript 函数 on Hugo 中文文档

js.Babel

Fri, 02 Oct 2026 00:00:00 +0800

js.Babel 函数使用 Babel 转换 JavaScript。

准备

第 1 步

第 2 步

在项目根目录安装所需的 Node 包。例如，安装 Babel 的核心编译器、它的命令行界面，以及根据目标环境转译现代 JavaScript 的预设：

npm install --save-dev @babel/core @babel/cli @babel/preset-env

第 3 步

在项目根目录创建 Babel 配置文件。例如，使用环境预设，目标为 Google Chrome 79 或更高版本：

babel.config.mjs

export default {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          chrome: "79"
        }
      }
    ]
  ]
};

第 4 步

把 JS 文件放进 assets/js 目录。

第 5 步

在项目配置中把 babel 可执行文件加入 Hugo 的 security.exec.allow 列表：

[security.exec]
  allow = ['^(dart-)?sass$', '^go$', '^git$', '^node$', '^postcss$', '^babel$']

第 6 步

创建一个 partial 模板来处理这段 JavaScript：

layouts/_partials/js.html

{{ with resources.Get "js/main.js" }}
  {{ $opts := dict
    "minified" (cond hugo.IsDevelopment false true)
    "noComments" (cond hugo.IsDevelopment false true)
    "sourceMap" (cond hugo.IsDevelopment "inline" "none")
  }}
  {{ with . | js.Babel $opts }}
    {{ if hugo.IsDevelopment }}
      <script src="{{ .RelPermalink }}"></script>
    {{ else }}
      {{ with . | fingerprint }}
        <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
      {{ end }}
    {{ end }}
  {{ end }}
{{ end }}

第 7 步

从 base 模板调用这个 partial 模板：

layouts/baseof.html

<head>
  {{ partial "js.html" . }}
</head>

选项

js.Babel 函数接受一个选项映射。

js.Batch

Fri, 02 Oct 2026 00:00:00 +0800

批次 ID 用于创建该批次的基础目录，允许使用正斜杠。js.Batch 函数返回一个对象，其 API 结构如下：

js.Build

Fri, 02 Oct 2026 00:00:00 +0800

用 js.Build 函数可以：

打包（bundle）
转译（TypeScript 与 JSX）
摇树（tree shake）
压缩（minify）
生成 source map

{{ with resources.Get "js/main.js" }}
  {{$opts := dict
    "minify" (cond hugo.IsDevelopment false true)
    "sourceMap" (cond hugo.IsDevelopment "linked" "none")
  }}
  {{ with . | js.Build $opts }}
    {{ if hugo.IsDevelopment }}
      <script src="{{ .RelPermalink }}"></script>
    {{ else }}
      {{ with . | fingerprint }}
        <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
      {{ end }}
    {{ end }}
  {{ end }}
{{ end }}

选项

js.Build 函数接受一个选项映射。