js.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 }}

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$']

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

config : (string) Path to the Babel configuration file. Hugo will, by default, look for a babel.config.js in your project. More information on these configuration files can be found here: babel configuration.

minified : (bool) Save as many bytes as possible when printing

noComments : (bool) Write comments to generated output (true by default)

compact : (bool) Do not include superfluous whitespace characters and line terminators. Defaults to auto if not set.

verbose : (bool) Log everything

sourceMap : (string) Output inline or external sourcemap from the babel compile. External sourcemaps will be written to the target with the output file name + ".map". Input sourcemaps can be read from js.Build and node modules and combined into the output sourcemaps.