Compile JS from block folders and add them to app.js

sage
1

Hey all.

I’m developing a site using Gutenberg blocks and am in the process of trying to get app.js to grab all the js files from all block folders in views/blocks/**/*

I’m already grabbing all the css and scss files from all folders and compiling those into app.css and that’s working great with the aid of fast-glob.

My file structure is organised like this:

/views/blocks/block-name

and in each:

block-name.php
block-name.scss
block-name.js

However I can’t get the same working for js files. Here’s my bud.config.mjs file:

/**
     * Application entrypoints
     */
    .entry({
      app: ["@scripts/app", "@styles/app", "views/blocks/**/*.{css,scss,js}"],
      editor: ["@scripts/editor", "@styles/editor"],
    })

I’ve also tried adding:

/**
     * Application entrypoints
     */
    .entry({
      app: ["@scripts/app", "@styles/app", "views/blocks/**/*.{css,scss}"],
      editor: ["@scripts/editor", "@styles/editor"],
      blocks: ["views/blocks/**/*.{js}"]
    })

But neither work for me. When it compiles OK, I get errors that imports aren’t working.

Here’s an example of a Swiper in banner.js:

import Swiper from 'swiper/bundle';

// init Swiper:
const swiperbanner = new Swiper('.swiper-banner', {
    // Optional parameters
    loop: true,
    // If we need pagination
    pagination: {
        el: '.swiper-banner-pagination',
        clickable: true
    },
});

Any ideas / advice would be highly appreciated.

2

Bud config for outputting multiple css files (from scss for ACF Blocks) - #6 by kellymears this thread might be what you’re looking for