js.Babel
语法
js.Babel [OPTIONS] RESOURCE
返回值
resource.Resource
别名
babel
/hugo-pipes/babel/
{{ with resources.Get "js/main.js" }}
{{ if hugo.IsDevelopment }}
{{ with . | babel }}
<script src="{{ .RelPermalink }}"></script>
{{ end }}
{{ else }}
{{ $opts := dict "minified" true }}
{{ with . | babel $opts | fingerprint }}
<script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
{{ end }}
{{ end }}
{{ end }}
设置
- 步骤 1
- 安装 Node.js
- 步骤 2
- 在项目的根目录中安装所需的 Node.js 包。
npm install --save-dev @babel/core @babel/cli
- 步骤 3
- 将 babel 可执行文件添加到 Hugo 站点配置中的
security.exec.allow列表中
hugo.
security:
exec:
allow:
- ^(dart-)?sass(-embedded)?$
- ^go$
- ^npx$
- ^postcss$
- ^babel$
[security]
[security.exec]
allow = ['^(dart-)?sass(-embedded)?$', '^go$', '^npx$', '^postcss$', '^babel$']
{
"security": {
"exec": {
"allow": [
"^(dart-)?sass(-embedded)?$",
"^go$",
"^npx$",
"^postcss$",
"^babel$"
]
}
}
}
配置
在运行 Babel 和类似工具时，我们会将主项目的 node_modules 添加到 NODE_PATH 中。这方面存在一些已知的 问题，因此，如果你的 Hugo 模块中（而不是项目本身）存在 babel.config.js，我们建议使用 require 来加载预设/插件，例如
module.exports = {
presets: [
[
require("@babel/preset-env"),
{
useBuiltIns: "entry",
corejs: 3,
},
],
],
};
选项
- config
- （
string）Babel 配置文件的路径。默认情况下，Hugo 将在你的项目中查找babel.config.js。有关这些配置文件的更多信息，请参阅此处：babel 配置。 - minified
- （
bool）在打印时尽可能节省字节 - noComments
- （
bool）将注释写入生成的输出（默认为 true） - compact
- （
bool）不包括多余的空格字符和行终止符。如果未设置，则默认为auto。 - verbose
- （
bool）记录所有内容 - sourceMap
- （
string）从 babel 编译输出inline或external源代码映射。外部源代码映射将写入目标，文件名 + “.map”。可以从 js.Build 和 node 模块读取输入源代码映射，并将其合并到输出源代码映射中。