js.Babel

js.Babel [OPTIONS] RESOURCE

resource.Resource

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$

[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

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.