js.Build

js.Build [选项] 资源

resource.Resource

js.Build 函数使用 evanw/esbuild 包来执行以下操作：

• 打包
• 转译（TypeScript 和 JSX）
• 摇树
• 压缩
• 生成源映射

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

选项

targetPath

(string) 若未设置，则使用源路径作为目标基准路径。请注意，目标路径的扩展名可能会根据目标 MIME 类型的不同而改变，例如在源为 TypeScript 时。

params [map or slice]

(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 处理压缩。

inject

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

shims

(map) 此选项允许用另一个组件替换组件。一个常见的用例是在开发时从 CDN 加载依赖项（通过 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';

target

(string) 目标语言版本。可选值为：es5、es2015、es2016、es2017、es2018、es2019、es2020 或 esnext。默认为 esnext。

externals

(slice) 外部依赖项。使用此选项可以剔除您知道永远不会执行的依赖项。查看 https://esbuild.github.io/api/#external。

defines

(map) 允许定义一组要在构建过程中进行的字符串替换。应该是一个映射，其中每个键将被替换为其值。

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

format

(string) 输出格式。可选值为：iife、cjs、esm。默认为 iife，一种自执行函数，适用于包含在 <script> 标签中。

sourceMap

(string) 是否从 esbuild 生成 inline 或 external 源映射。外部源映射将写入到目标文件的文件名 + “.map” 中。输入源映射可以从 js.Build 和节点模块中读取，并合并到输出源映射中。默认情况下，不会生成源映射。

从 /assets 导入 JS 代码

js.Build 对于Hugo 模块中的虚拟联合文件系统具有完全支持。您可以在这个test project中看到一些简单的示例，但简而言之，这意味着您可以执行以下操作：

import { hello } from 'my/module';

它将解析为分层文件系统中 assets/my/module 内最高级的 index.{js,ts,tsx,jsx}。

import { hello3 } from 'my/module/hello3';

将解析为 assets/my/module 中的 hello3.{js,ts,tsx,jsx}。

任何以 . 开头的导入路径都是相对于当前文件解析的：

import { hello4 } from './lib';

对于其他文件（例如 JSON、CSS），您需要使用相对路径，包括任何扩展名，例如：

import * as data from 'my/module/data.json';

在 /assets 之外的文件中或者无法解析到 /assets 内的组件的任何导入将使用 ESBuild 进行解析，并将项目目录当作解析目录（用作查找 node_modules 等的起始点）。还请参阅 hugo mod npm pack。如果在项目中有任何导入的 npm 依赖项，请确保在运行 hugo 之前运行 npm install。

此外，请注意传递给模板的 JS 文件的新 params 选项，例如：

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

然后在您的 JS 文件中：

import * as params from '@params';

默认情况下，Hugo 会生成 assets/jsconfig.json 文件来映射这些导入。这对于代码编辑器中的导航/智能感知功能很有用，但如果您不需要/不想要它，您可以将其关闭。

Node.js 依赖项

使用 js.Build 函数来包含 Node.js 依赖项。

在 /assets 之外的文件中或者无法解析到 /assets 内的组件的任何导入将使用 esbuild 进行解析，并将项目目录当作解析目录（用作查找 node_modules 等的起始点）。还请参阅 hugo mod npm pack。如果在项目中有任何导入的 npm 依赖项，请确保在运行 hugo 之前运行 npm install。

解析 npm 包（也称为位于 node_modules 文件夹内的包）的起始目录始终是主项目文件夹。

**注意：**如果您正在开发一个应该被导入并依赖于 package.json 内依赖项的主题/组件，我们建议阅读有关 hugo mod npm pack 的文档，这是一个用于合并项目中的所有 npm 依赖项的工具。

示例

{{ $built := resources.Get "js/index.js" | js.Build "main.js" }}

或者加上选项：

{{ $externals := slice "react" "react-dom" }}
{{ $defines := dict "process.env.NODE_ENV" `"development"` }}

{{ $opts := dict "targetPath" "main.js" "externals" $externals "defines" $defines }}
{{ $built := resources.Get "scripts/main.js" | js.Build $opts }}
<script src="{{ $built.RelPermalink }}" defer></script>