js.Babel
Compile the given JavaScript resource with Babel.
Syntax
js.Babel [OPTIONS] RESOURCE
Returns
resource.Resource
Alias
babel
{{ with resources.Get "js/main.js" }}
{{ $opts := dict
"minified" hugo.IsProduction
"noComments" hugo.IsProduction
"sourceMap" (cond hugo.IsProduction "none" "external")
}}
{{ with . | js.Babel $opts }}
{{ if hugo.IsProduction }}
{{ with . | fingerprint }}
<script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script>
{{ end }}
{{ else }}
<script src="{{ .RelPermalink }}"></script>
{{ end }}
{{ end }}
{{ end }}
Setup
Step 1
Install Node.js
Step 2
Install the required Node.js packages in the root of your project.
npm install --save-dev @babel/core @babel/cli
Step 3
Add the babel executable to Hugo’s security.exec.allow
list in your site configuration:
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$"
]
}
}
}
Configuration
We add the main project’s node_modules
to NODE_PATH
when running Babel and similar tools. There are some known issues with Babel in this area, so if you have a babel.config.js
living in a Hugo Module (and not in the project itself), we recommend using require
to load the presets/plugins, e.g.:
module.exports = {
presets: [
[
require("@babel/preset-env"),
{
useBuiltIns: "entry",
corejs: 3,
},
],
],
};
Options
- compact
- (
bool
) Whether to remove optional newlines and whitespace. Enabled whenminified
istrue
. Default isfalse
- config
- (
string
) Path to the Babel configuration file. Hugo will, by default, look for ababel.config.js
file in the root of your project. See details. - minified
- (
bool
) Whether to minify the compiled code. Enables thecompact
option. Default isfalse
. - noBabelrc
- (
string
) Whether to ignore.babelrc
and.babelignore
files. Default isfalse
. - noComments
- (
bool
) Whether to remove comments. Default isfalse
. - sourceMap
- (
string
) Whether to generate source maps, one ofexternal
,inline
, ornone
. Default isnone
. - verbose
- (
bool
) Whether to enable verbose logging. Default isfalse
Last updated:
March 6, 2025
:
content: Replace calls to the code shortcode with fenced code blocks (fd628be6e)
Improve this page