js.Batch

The Batch ID is used to create the base directory for this batch. Forward slashes are allowed. js.Batch returns an object with an API with this structure:

• Group
  • Script
    • SetOptions
  • Instance
    • SetOptions
  • Runner
    • SetOptions
  • Config
    • SetOptions

Group

The Group method take an ID (string) as argument. No slashes. It returns an object with these methods:

Script

The Script method takes an ID (string) as argument. No slashes. It returns an OptionsSetter that can be used to set script options for this script.

{{ with js.Batch "js/mybatch" }}
  {{ with .Group "mygroup" }}
      {{ with .Script "myscript" }}
          {{ .SetOptions (dict "resource" (resources.Get "myscript.js")) }}
      {{ end }}
  {{ end }}
{{ end }}

SetOptions takes a script options map. Note that if you want the script to be handled by a runner, you need to set the export option to match what you want to pass on to the runner (default is *).

Instance

The Instance method takes two string arguments SCRIPT_ID and INSTANCE_ID. No slashes. It returns an OptionsSetter that can be used to set params options for this instance.

{{ with js.Batch "js/mybatch" }}
  {{ with .Group "mygroup" }}
      {{ with .Instance "myscript" "myinstance" }}
          {{ .SetOptions (dict "params" (dict "param1" "value1")) }}
      {{ end }}
  {{ end }}
{{ end }}

SetOptions takes a params options map. The instance options will be passed to any runner script in the same group, as JSON.

Runner

The Runner method takes an ID (string) as argument. No slashes. It returns an OptionsSetter that can be used to set script options for this runner.

{{ with js.Batch "js/mybatch" }}
  {{ with .Group "mygroup" }}
      {{ with .Runner "myrunner" }}
          {{ .SetOptions (dict "resource" (resources.Get "myrunner.js")) }}
      {{ end }}
  {{ end }}
{{ end }}

SetOptions takes a script options map.

The runner will receive a data structure with all instances for that group with a live binding of the JavaScript import of the defined export.

The runner script’s export must be a function that takes one argument, the group data structure. An example of a group data structure as JSON is:

{
    "id": "leaflet",
    "scripts": [
        {
            "id": "mapjsx",
            "binding": JAVASCRIPT_BINDING,
            "instances": [
                {
                    "id": "0",
                    "params": {
                        "c": "h-64",
                        "lat": 48.8533173846729,
                        "lon": 2.3497416090232535,
                        "r": "map.jsx",
                        "title": "Cathédrale Notre-Dame de Paris",
                        "zoom": 23
                    }
                },
                {
                    "id": "1",
                    "params": {
                        "c": "h-64",
                        "lat": 59.96300872062237,
                        "lon": 10.663529183196863,
                        "r": "map.jsx",
                        "title": "Holmenkollen",
                        "zoom": 3
                    }
                }
            ]
        }
    ]
}

Below is an example of a runner script that uses React to render elements. Note that the export (default) must match the export option in the script options (default is the default value for runner scripts) (runnable versions of examples on this page can be found at js.Batch Demo Repo):

import * as ReactDOM from 'react-dom/client';
import * as React from 'react';

export default function Run(group) {
  console.log('Running react-create-elements.js', group);
  const scripts = group.scripts;
  for (const script of scripts) {
    for (const instance of script.instances) {
      /* This is a convention in this project. */
      let elId = `${script.id}-${instance.id}`;
      let el = document.getElementById(elId);
      if (!el) {
        console.warn(`Element with id ${elId} not found`);
        continue;
      }
      const root = ReactDOM.createRoot(el);
      const reactEl = React.createElement(script.binding, instance.params);
      root.render(reactEl);
    }
  }
}

Config

Returns an OptionsSetter that can be used to set build options for the batch.

These are mostly the same as for js.Build, but note that:

• targetPath is set automatically (there may be multiple outputs).
• format must be esm, currently the only format supporting code splitting.
• params will be available in the @params/config namespace in the scripts. This way you can import both the script or runner params and the config params with:

import * as params from "@params";
import * as config from "@params/config";

Setting the Config for a batch can be done from any template (including shortcode templates), but will only be set once (the first will win):

{{ with js.Batch "js/mybatch" }}
  {{ with .Config }}
       {{ .SetOptions (dict
        "target" "es2023"
        "format" "esm"
        "jsx" "automatic"
        "loaders" (dict ".png" "dataurl")
        "minify" true
        "params" (dict "param1" "value1")
        )
      }}
  {{ end }}
{{ end }}

Options

Build options

format

(string) Currently only esm is supported in ESBuild’s code splitting.

params

(map 或 slice) 可以在 JS 文件中作为 JSON 导入的参数，例如：

{{ $js := resources.Get "js/main.js" | js.Build (dict "params" (dict "api" "https://example.org/api")) }}

然后在您的 JS 文件中：

import * as params from '@params';

请注意，这适用于小型数据集，例如配置设置。对于较大数据集，请将文件放入/挂载到 assets 并直接导入。

minify

(bool) 是否让 js.Build 处理压缩。

loaders

New in v0.140.0

(map) 为给定文件类型配置加载器允许您使用 import 语句或 require 调用加载该文件类型。例如，将 .png 文件扩展名配置为使用数据 URL 加载器意味着导入 .png 文件会为您提供包含该图像内容的数据 URL。可用的加载器包括 none、base64、binary、copy、css、dataurl、default、empty、file、global-css、js、json、jsx、local-css、text、ts、tsx。请参阅 https://esbuild.github.io/api/#loader。

inject

(slice) 此选项允许您自动将全局变量替换为来自另一个文件的导入。路径名必须相对于 assets。请参阅 https://esbuild.github.io/api/#inject。

shims

(map) 此选项允许将组件替换为另一个组件。一个常见的用例是在生产环境中从 CDN 加载依赖项（如 React）（使用 shims），但在开发期间使用完整的捆绑 node_modules 依赖项运行：

{{ $shims := dict "react" "js/shims/react.js"  "react-dom" "js/shims/react-dom.js" }}
{{ $js = $js | js.Build dict "shims" $shims }}

shim 文件可能如下所示：

// js/shims/react.js
module.exports = window.React;

// js/shims/react-dom.js
module.exports = window.ReactDOM;

使用上述内容，这些导入应该在两种情况下都有效：

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';

target

(string) 语言目标。其中之一：es5、es2015、es2016、es2017、es2018、es2019、es2020、es2021、es2022、es2023、es2024 或 esnext。默认为 esnext。

platform

New in v0.140.0

(string) 其中之一 browser、node、neutral。默认为 browser。请参阅 https://esbuild.github.io/api/#platform。

externals

(slice) 外部依赖项。使用此选项可以修剪您知道永远不会执行的依赖项。请参阅 https://esbuild.github.io/api/#external。

defines

(map) 此选项允许您定义一组在构建时执行的字符串替换。它必须是一个映射，其中每个键将被其值替换。

{{ $defines := dict "process.env.NODE_ENV" `"development"` }}

drop

New in v0.144.0

(string) 在构建之前编辑源代码以删除某些构造：其中之一 debugger 或 console。

请参阅 https://esbuild.github.io/api/#drop

sourceMap

(string) 是否从 esbuild 生成 inline、linked 或 external 源映射。Linked 和 external 源映射将写入目标目录，文件名为输出文件名 + “.map”。当使用 linked 时，sourceMappingURL 也将写入输出文件。默认情况下，不创建源映射。请注意，linked 选项是在 Hugo 0.140.0 中添加的。

sourcesContent

New in v0.140.0

(bool) 是否在源映射中包含源文件的内容。默认情况下，这是 true。

JSX

(string) 如何处理/转换 JSX 语法。其中之一：transform、preserve、automatic。默认为 transform。特别是，automatic 转换是在 React 17+ 中引入的，将自动导入必要的 JSX 辅助函数。请参阅 https://esbuild.github.io/api/#jsx。

JSXImportSource

(string) 自动导入其 JSX 辅助函数的库。这仅在 JSX 设置为 automatic 时有效。指定的库需要通过 npm 安装并公开某些导出。请参阅 https://esbuild.github.io/api/#jsx-import-source。

JSX 和 JSXImportSource 的组合对于您想使用非 React JSX 库（如 Preact）很有用，例如：

{{ $js := resources.Get "js/main.jsx" | js.Build (dict "JSX" "automatic" "JSXImportSource" "preact") }}

使用上述内容，您可以使用 Preact 组件和 JSX，而无需每次都手动导入 h 和 Fragment：

import { render } from 'preact';

const App = () => <>Hello world!</>;

const container = document.getElementById('app');
if (container) render(<App />, container);

Script options

resource

The resource to build. This can be a file resource or a virtual resource.

export

The export to bind the runner to. Set it to * to export the entire namespace. Default is default for runner scripts and * for other scripts.

importContext

An additional context for resolving imports. Hugo will always check this one first before falling back to assets and node_modules. A common use of this is to resolve imports inside a page bundle. See import context.

params

A map of parameters that will be passed to the script as JSON. These gets bound to the @params namespace:

import * as params from '@params';

Params options

params

A map of parameters that will be passed to the script as JSON.

Import context

Hugo will, by default, first try to resolve any import in assets and, if not found, let ESBuild resolve it (e.g. from node_modules). The importContext option can be used to set the first context for resolving imports. A common use of this is to resolve imports inside a page bundle.

{{ $common := resources.Match "/js/headlessui/*.*" }}
{{ $importContext := (slice $.Page ($common.Mount "/js/headlessui" ".")) }}

You can pass any object that implements Resource.Get. Pass a slice to set multiple contexts.

The example above uses Resources.Mount to resolve a directory inside assets relative to the page bundle.

OptionsSetter

An OptionsSetter is a special object that is returned once only. This means that you should wrap it with with:

{{ with .Script "myscript" }}
    {{ .SetOptions (dict "resource" (resources.Get "myscript.js"))}}
{{ end }}

Build

The Build method returns an object with the following structure:

• Groups (map)
  • Resources

Each Resource will be of media type application/javascript or text/css.

In a template you would typically handle one group with a given ID (e.g. scripts for the current section). Because of the concurrent build, this needs to be done in a templates.Defer block:

{{ $group := .group }}
{{ with (templates.Defer (dict "key" $group "data" $group )) }}
  {{ with (js.Batch "js/mybatch") }}
    {{ with .Build }}
      {{ with index .Groups $ }}
        {{ range . }}
          {{ $s := . }}
          {{ if eq $s.MediaType.SubType "css" }}
            <link href="{{ $s.RelPermalink }}" rel="stylesheet" />
          {{ else }}
            <script src="{{ $s.RelPermalink }}" type="module"></script>
          {{ end }}
        {{ end }}
      {{ end }}
  {{ end }}
{{ end }}

Known Issues

In the official documentation for ESBuild’s code splitting, there’s a warning note in the header. The two issues are:

• esm is currently the only implemented output format. This means that it will not work for very old browsers. See caniuse.
• There’s a known import ordering issue.

We have not seen the ordering issue as a problem during our extensive testing of this new feature with different libraries. There are two main cases:

1. Undefined execution order of imports, see this comment
2. Only one execution order of imports, see this comment

Many would say that both of the above are code smells. The first one has a simple workaround in Hugo. Define the import order in its own script and make sure it gets passed early to ESBuild, e.g. by putting it in a script group with a name that comes early in the alphabet.

import './lib2.js';
import './lib1.js';

console.log('entrypoints-workaround.js');