mirror of https://github.com/gohugoio/hugo
107 lines
2.8 KiB
Markdown
107 lines
2.8 KiB
Markdown
---
|
|
title: js.Babel
|
|
description: Compile the given JavaScript resource with Babel.
|
|
categories: []
|
|
keywords: []
|
|
action:
|
|
aliases: [babel]
|
|
related:
|
|
- functions/js/Batch
|
|
- functions/js/Build
|
|
- functions/resources/Fingerprint
|
|
- functions/resources/Minify
|
|
returnType: resource.Resource
|
|
signatures: ['js.Babel [OPTIONS] RESOURCE']
|
|
weight: 30
|
|
toc: true
|
|
---
|
|
|
|
```go-html-template
|
|
{{ 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](https://nodejs.org/en/download)
|
|
|
|
Step 2
|
|
: Install the required Node.js packages in the root of your project.
|
|
|
|
```sh
|
|
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:
|
|
|
|
{{< code-toggle file=hugo >}}
|
|
[security.exec]
|
|
allow = ['^(dart-)?sass(-embedded)?$', '^go$', '^npx$', '^postcss$', '^babel$']
|
|
{{< /code-toggle >}}
|
|
|
|
## Configuration
|
|
|
|
We add the main project's `node_modules` to `NODE_PATH` when running Babel and similar tools. There are some known [issues](https://github.com/babel/babel/issues/5618) 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.:
|
|
|
|
```js
|
|
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](https://babeljs.io/docs/en/configuration).
|
|
|
|
###### 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`.
|
|
|
|
<!-- In the above, technically "none" is not one of the enumerated values, but it has the same effect and is easier to document than an empty string. -->
|
|
|
|
###### verbose
|
|
|
|
(`bool`) Whether to enable verbose logging. Default is `false`
|