Gulp can't build ES6 javascript

Developer help
1

Ghost version: 3.14.0
Config: Hosted on DigitalOcean droplet, with nginx and docker-compose

What errors or information do you see in the console:
I downloaded the Lyra theme, and tried to edit the css and js files. I wanted to rebuild to get the latest css and js files in the built folder, but it appears that gulp does not support ES6 ES2015 javascript.

In this case, the error occurs using the string template literal in ES6, which I used to create a table of contents javascript file.

Error is depicted in the image below:
Gulp error

What steps could someone else take to reproduce the issue you’re having?
Download a theme, add in javascript files using ES6 syntax into the js folder. Run yarn dev to build.

How can I change the gulp file to build ES6 javascript, or will this be supported in future releases of Lyra? Thank you.

2

Hey @chenningg

You’re free to change the gulp version and dependencies so you can use ES6 in your customised theme. Gulp is merely used to manage assets within the theme, it can be entirely configured to your needs. You’ll probably need to use something gulp-babel to compile the JavaScript from ES6 files.

I found this article which might be a good starting point for you use case :blush:

2 Likes
3

I’ll check it out! Meanwhile, will there be support for the “default” gulpfile to include ES6 support in the near future for the supported themes of Casper and Lyra?

4

Not that I’m aware of. As I said it’s best to customise the theme for your use case :blush:

5

@chenningg

I wanted to let you know that converting your theme to ES6 is relatively straight forward. I’ve managed to do it for a theme I am currently working on. There are various resources out there and I did try a few things before I landed on what ended up being a relatively simple solution.

I followed this post:

In a nutshell the steps are as follows:

  1. Install webpack, @babel/core, @babel/preset-env, babel-loader, source-map-loader

  2. Include webpack as a dependency in your gulp file (i.e. const webpack = require("webpack"))

  3. Include webpackConfig in your Gulpfile…

const webpackConfig = "./webpack.config.js";

  1. Change the JS processing part of your Gulpfile to defer to Webpack. Something like this…

function js(done) { return (new Promise((resolve, reject) => { webpack(require(webpackConfig), (err, stats) => { if (err) { return reject(err); } if (stats.hasErrors()) { return reject(new Error(stats)); } resolve(); }); })); }

  1. Create a webpack.config.js file in your project root with contents something like this…

const path = require("path"); const glob = require("glob"); const outputDir = path.resolve(__dirname, "assets/built"); module.exports = { mode: "development", entry: { js: glob.sync(path.resolve(__dirname, "assets/js/") + "**/*.js") }, devtool: "inline-source-map", output: { path: outputDir, filename: "app.js" }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: ["babel-loader"] }, { test: /\.js$/, use: ["source-map-loader"], enforce: "pre" } ] } };

Done!