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:
August 22, 2025
:
content: Reformat procedures to use description lists instead of H3 elements (71f739460)
Improve this page