js.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 when minified is true. Default is false

config #

(string) Path to the Babel configuration file. Hugo will, by default, look for a babel.config.js file in the root of your project. See details.

minified #

(bool) Whether to minify the compiled code. Enables the compact option. Default is false.

noBabelrc #

(string) Whether to ignore .babelrc and .babelignore files. Default is false.

noComments #

(bool) Whether to remove comments. Default is false.

sourceMap #

(string) Whether to generate source maps, one of external, inline, or none. Default is none.

verbose #

(bool) Whether to enable verbose logging. Default is false