Skip to main content

Alternative config syntaxes

In addition to .js, .cjs and .mjs configurations, bud.js supports configuration files authored with json5 and yml.

TypeScript support is relatively easy to add.

YML​

For instance, the equivalent of the following JS configuration:

bud.entry('app', 'app.js')

Would be:

entry: ['app', 'app.js']

There is some flexibility here if you are passing a single value and it is NOT an array. So, this is okay:

entry:
  app: app.js

But, this would cause an error. it will be parsed as if it were a multi-parameter call:

# This is incorrect
assets: ['src/**/*.html', 'app/**/*.html']

You can access nested properties no problem.

babel:
  setPluginOptions:
    - '@babel/plugin-transform-runtime'
    - {helpers: true}

Referencing bud.js values​

You can make reference to the bud object with _bud.

splitChunks: _bud.isProduction

You can tap bud with an arrow fn if needed. These functions will be called as they are encountered and supplied with the bud.js instance.

minimize: bud => bud.isProduction

Treating a value as a function​

You can prefix a string with => to indicate that it should be treated as a function. These functions will be called as they are encountered.

This will log 4:

log: => 2 + 2

Handling callbacks​

Some functions accept functions as a value. In cases like these wrap the function in an additional => so that the config parser does not call the function itself.

webpackConfig: >
  => config => ({...config, parallelism: 1})

bud.tap and bud.tapAsync can be helpful for dynamic configuration and work like this:

tap: >
  => bud => {
    // this is a very flexible
    // area to do all sorts of dynamic config stuff
    bud.log('hi!')
  }

tapAsync: >
  => async bud => {
    // same as above but async
    bud.log('hi!', '...eventually')
  }

If you're doing a lot of this remember that you can create JS configurations in addition to the yml one.

JSON​

JSON works by the same rules as yml and you can use json5 syntax (comments, non-quoted keys).

{
  entry: ['app', ['app.js']],
  runtime: [true],
  assets: [['src/**/*.html']],
  babel: {
    setPluginOptions: [
      "@babel/plugin-transform-runtime",
      {helpers: false, regenerator: false},
    ],
  },
}

If you are doing a lot of dynamic configuration you may find it easier to use YML or JS. Ultimately, it's your choice, but we recommend using yml over json for more complicated configs.

TypeScript​

You can use TypeScript to configure your build. In general we would recommend using JavaScript with typedoc comments, but TypeScript is supported.

ts-bud​

When configuring bud.js with TypeScript you must use ts-bud rather than the standard bud command.