js.Build
语法
js.Build [OPTIONS] RESOURCE
返回值
resource.Resource
用法
任何 JavaScript 资源文件都可以使用 js.Build 进行转译和“摇树”，该函数的参数可以是文件路径的字符串，也可以是下面列出的选项的字典。
选项
- targetPath
- （
字符串）如果未设置，则源路径将用作基本目标路径。请注意，如果目标 MIME 类型不同，则目标路径的扩展名可能会更改，例如，当源是 TypeScript 时。 - params
- （
映射或切片）可以作为 JSON 导入到 JS 文件中的参数，例如：
{{ $js := resources.Get "js/main.js" | js.Build (dict "params" (dict "api" "https://example.org/api")) }}
然后在您的 JS 文件中
import * as params from '@params';
请注意，这适用于小型数据集，例如配置设置。对于较大的数据，请将文件放入/挂载到 /assets 中并直接导入它们。
- minify
- （
布尔值）让js.Build处理缩小。 - inject
- （
切片）此选项允许您自动将全局变量替换为来自另一个文件的导入。路径名必须相对于assets。参见 https://esbuild.org.cn/api/#inject - shims
- （
映射）此选项允许用另一个组件替换组件。一个常见的用例是在生产环境中从 CDN 加载 React 等依赖项（使用垫片），但在开发过程中使用完整捆绑的node_modules依赖项。
{{ $shims := dict "react" "js/shims/react.js" "react-dom" "js/shims/react-dom.js" }}
{{ $js = $js | js.Build dict "shims" $shims }}
垫片文件可能如下所示
// 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
- （
字符串）语言目标。以下之一：es5、es2015、es2016、es2017、es2018、es2019、es2020或esnext。默认值为esnext。 - externals
- （
切片）外部依赖项。使用此选项修剪您知道永远不会执行的依赖项。参见 https://esbuild.org.cn/api/#external - defines
- （
映射）允许定义一组在构建时执行的字符串替换。应为一个映射，其中每个键都将替换为其值。
{{ $defines := dict "process.env.NODE_ENV" `"development"` }}
- format
- （
字符串）输出格式。以下之一：iife、cjs、esm。默认值为iife，一个自执行函数，适合作为<script>标记包含。 - sourceMap
- （
字符串）是否从 esbuild 生成内联或外部源映射。外部源映射将写入目标文件，其文件名加上“.map”。可以从 js.Build 和节点模块读取输入源映射，并将其合并到输出源映射中。默认情况下，不会创建源映射。 - JSX v0.124.0 中新增
- （
字符串）如何处理/转换 JSX 语法。以下之一：transform、preserve、automatic。默认值为transform。值得注意的是，automatic转换是在 React 17+ 中引入的，它将导致必要的 JSX 辅助函数自动导入。参见 https://esbuild.org.cn/api/#jsx - JSXImportSource v0.124.0 中新增
- （
字符串）要使用的库，以便自动从该库导入其 JSX 辅助函数。只有在JSX设置为automatic时，此功能才有效。指定的库需要通过 NPM 安装，并公开某些导出。参见 https://esbuild.org.cn/api/#jsx-import-source
如果您想使用 Preact 等非 React JSX 库，则 JSX 和 JSXImportSource 的组合非常有用，例如：
{{ $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);
从 /assets 导入 JS 代码
js.Build 完全支持 Hugo 模块 中的虚拟联合文件系统。您可以在此 测试项目 中看到一些简单的示例，但简而言之，这意味着您可以执行以下操作
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 文件，该文件映射导入。这对于代码编辑器内的导航/智能感知帮助很有用，但如果您不需要/不需要它，您可以 关闭它。
在 package.json / node_modules 中包含依赖项
/assets 外部的文件或未解析为 /assets 内部的组件的任何导入都将由 ESBuild 解析，并将项目目录作为解析目录（在查找 node_modules 等时用作起点）。另请参见 hugo mod npm pack。如果您在项目中有任何导入的 npm 依赖项，则需要确保在运行 hugo 之前运行 npm install。
解析 npm 包（即位于 node_modules 文件夹内的包）的起始目录始终为主项目文件夹。
示例
{{ $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>