mirror of
https://github.com/gohugoio/hugo.git
synced 2025-08-19 21:21:39 +02:00
55
docs/content/en/hugo-pipes/babel.md
Executable file
55
docs/content/en/hugo-pipes/babel.md
Executable file
@@ -0,0 +1,55 @@
|
||||
---
|
||||
title: Babel
|
||||
description: Hugo Pipes can process JS files with Babel.
|
||||
date: 2019-03-21
|
||||
publishdate: 2019-03-21
|
||||
lastmod: 2019-03-21
|
||||
categories: [asset management]
|
||||
keywords: []
|
||||
menu:
|
||||
docs:
|
||||
parent: "pipes"
|
||||
weight: 49
|
||||
weight: 49
|
||||
sections_weight: 49
|
||||
draft: false
|
||||
---
|
||||
|
||||
Any JavaScript resource file can be transpiled to another JavaScript version using `resources.Babel` which takes for argument the resource object and an optional dict of options listed below. Babel uses the [babel cli](https://babeljs.io/docs/en/babel-cli).
|
||||
|
||||
|
||||
{{% note %}}
|
||||
Hugo Pipe's Babel requires the `@babel/cli` and `@babel/core` JavaScript packages to be installed in the project or globally (`npm install -g @babel/cli @babel/core`) along with any Babel plugin(s) or preset(s) used (e.g., `npm install @babel/preset-env --save-dev`).
|
||||
|
||||
If you are using the Hugo Snap package, Babel and plugin(s) need to be installed locally within your Hugo site directory, e.g., `npm install @babel/cli @babel/core --save-dev` without the `-g` flag.
|
||||
{{% /note %}}
|
||||
|
||||
### 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](https://babeljs.io/docs/en/configuration).
|
||||
|
||||
minified [bool]
|
||||
: Save as much 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
|
||||
|
||||
### Examples
|
||||
|
||||
```go-html-template
|
||||
{{- $transpiled := resources.Get "scripts/main.js" | babel -}}
|
||||
```
|
||||
|
||||
Or with options:
|
||||
|
||||
```go-html-template
|
||||
{{ $opts := dict "noComments" true }}
|
||||
{{- $transpiled := resources.Get "scripts/main.js" | babel $opts -}}
|
||||
```
|
@@ -1,69 +0,0 @@
|
||||
---
|
||||
title: TransformJS
|
||||
description: Hugo Pipes can process JS files with Babel.
|
||||
date: 2019-03-21
|
||||
publishdate: 2019-03-21
|
||||
lastmod: 2019-03-21
|
||||
categories: [asset management]
|
||||
keywords: []
|
||||
menu:
|
||||
docs:
|
||||
parent: "pipes"
|
||||
weight: 75
|
||||
weight: 75
|
||||
sections_weight: 75
|
||||
draft: false
|
||||
---
|
||||
|
||||
Any JavaScript resource file can be transpiled to another JavaScript version using `resources.TransformJS` which takes for argument the resource object and a slice of options listed below. TransformJS uses the [babel cli](https://babeljs.io/docs/en/babel-cli).
|
||||
|
||||
|
||||
{{% note %}}
|
||||
Hugo Pipe's TranspileJS requires the `@babel/cli` and `@babel/core` JavaScript packages to be installed in the environment (`npm install -g @babel/cli @babel/core`) along with any Babel plugin(s) or preset(s) used (e.g., `npm install -g @babel/preset-env`).
|
||||
|
||||
If you are using the Hugo Snap package, Babel and plugin(s) need to be installed locally within your Hugo site directory, e.g., `npm install @babel/cli @babel/core` without the `-g` flag.
|
||||
{{% /note %}}
|
||||
### Options
|
||||
|
||||
config [string]
|
||||
: Path to the Babel configuration file
|
||||
|
||||
_If no configuration file is used:_
|
||||
|
||||
plugins [string]
|
||||
: Comma seperated string of Babel plugins to use
|
||||
|
||||
presets [string]
|
||||
: Comma seperated string of Babel presets to use
|
||||
|
||||
minified [bool]
|
||||
: Save as much bytes as possible when printing
|
||||
|
||||
noComments [bool]
|
||||
: Write comments to generated output (true by default)
|
||||
|
||||
compact [string]
|
||||
: Do not include superfluous whitespace characters and line terminators (true/false/auto)
|
||||
|
||||
verbose [bool]
|
||||
: Log everything
|
||||
|
||||
### Examples
|
||||
Without a `.babelrc` file, you can simply pass the options like so:
|
||||
```go-html-template
|
||||
{{- $transpileOpts := (dict "presets" "@babel/preset-env" "minified" true "noComments" true "compact" "true" ) -}}
|
||||
{{- $transpiled := resources.Get "scripts/main.js" | transpileJS $transpileOpts -}}
|
||||
```
|
||||
|
||||
If you rather want to use a config file, you can leave out the options in the template.
|
||||
```go-html-template
|
||||
{{- $transpiled := resources.Get "scripts/main.js" | transpileJS $transpileOpts -}}
|
||||
```
|
||||
Then, you can either create a `.babelrc` in the root of your project, or your can create a `.babel.config.js`.
|
||||
More information on these configuration files can be found here: [babel configuration](https://babeljs.io/docs/en/configuration)
|
||||
|
||||
Finally, you can also pass a custom file path to a config file like so:
|
||||
```go-html-template
|
||||
{{- $transpileOpts := (dict "config" "config/my-babel-config.js" ) -}}
|
||||
{{- $transpiled := resources.Get "scripts/main.js" | transpileJS $transpileOpts -}}
|
||||
```
|
Reference in New Issue
Block a user