babel.md (2643B)
1 --- 2 title: Babel 3 description: Hugo Pipes can process JS files with Babel. 4 date: 2019-03-21 5 publishdate: 2019-03-21 6 lastmod: 2019-03-21 7 categories: [asset management] 8 keywords: [] 9 menu: 10 docs: 11 parent: "pipes" 12 weight: 48 13 weight: 48 14 sections_weight: 48 15 draft: false 16 --- 17 18 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). 19 20 21 {{% note %}} 22 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`). 23 24 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. 25 {{% /note %}} 26 27 28 ### Config 29 30 {{< new-in "v0.75.0" >}} 31 32 In Hugo `v0.75` we improved the way we resolve JS configuration and dependencies. One of them is that we now 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.: 33 34 35 ```js 36 module.exports = { 37 presets: [ 38 [ 39 require('@babel/preset-env'), 40 { 41 useBuiltIns: 'entry', 42 corejs: 3 43 } 44 ] 45 ] 46 }; 47 ``` 48 49 50 51 ### Options 52 53 config [string] 54 : 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). 55 56 minified [bool] 57 : Save as much bytes as possible when printing 58 59 noComments [bool] 60 : Write comments to generated output (true by default) 61 62 compact [bool] 63 : Do not include superfluous whitespace characters and line terminators. Defaults to `auto` if not set. 64 65 verbose [bool] 66 : Log everything 67 68 ### Examples 69 70 ```go-html-template 71 {{- $transpiled := resources.Get "scripts/main.js" | babel -}} 72 ``` 73 74 Or with options: 75 76 ```go-html-template 77 {{ $opts := dict "noComments" true }} 78 {{- $transpiled := resources.Get "scripts/main.js" | babel $opts -}} 79 ```