js.Build
Syntax
js.Build [OPTIONS] RESOURCE
Returns
resource.Resource
用法
可以使用js.Build转译和“tree shaken”任何JavaScript资源文件，它接受一个文件路径的字符串或下面列出的选项字典作为参数。
选项
- targetPath [string]
- 如果未设置，将使用源路径作为目标路径的基准。 请注意，如果目标MIME类型不同，目标路径的扩展名可能会发生更改，例如当源是TypeScript时。
- 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处理代码的缩小。 - inject [slice]
- 此选项允许你使用另一个文件中的导入自动替换全局变量。路径名必须相对于“assets”。参见https://esbuild.github.io/api/#inject
- shims [map]
- 此选项允许将一个组件替换为另一个组件。一个常见的用例是在开发时从CDN加载依赖项（使用_shims_），而在生产环境中使用完整的捆绑的
node_modules依赖项来加载React等依赖项：
{{ $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]
- 允许定义一组要在构建时执行的字符串替换。应该是一个map，其中每个键都要被其值替换。
{{ $defines := dict "process.env.NODE_ENV" `"development"` }}
- format [string]
- 输出格式。
可选值:
iife,cjs,esm。 默认值为iife，一个自执行函数，适用于包含为标记。 - 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。
还请注意新的params选项，它可以从模板传递到您的JS文件中，例如：
{{ $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文件夹内的包）的起始目录始终是主项目文件夹。
**注意：**如果你正在开发一个应该被导入，并依赖于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>