JSPM

@roots/bud

2.0.3-next.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 6119
  • Score
    100M100P100Q138111F
  • License MIT

A friendly build tool to help manage your project assets.

Package Exports

  • @roots/bud

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@roots/bud) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Bud

MIT License Follow Roots

@roots/bud

Overview

A webpack framework combining the best parts of Laravel Mix and Symfony Encore.

Installation

yarn add @roots/bud --dev

Usage

const {bud} = require('@roots/bud')

bud.bundle('app', ['app.js', 'app.css']).compile()

Bud can do many more things. But a central philosophy of the framework is that more is not always better for many common use cases.

Plugins

Usage

Plugins are registered using bud.extend method. Plugins will be called in the provided order.

bud.extend([require('@roots/bud-eslint')])

Some plugins may attach additional configuration methods to the bud object for you to utilize.

Obviously, you can't call a plugin-provided method without first registering that plugin, which is one of the reasons it's generally a good idea to import and register everything at the top of your config.

bud.extend([require('@roots/bud-purgecss')]).purgecss({
  /** purgecss configuration */
})

First-party plugins

There are a number of Roots maintained plugins available to kickstart your projects.

Name Description Usage
@roots/bud-dependency-extraction-webpack-plugin Adds @wordpress/dependency-extraction-webpack-plugin support. Usage ↗
@roots/bud-eslint Adds eslint support. Usage ↗
@roots/bud-palette-webpack-plugin Adds palette-webpack-plugin support. Usage ↗
@roots/bud-purgecss Adds purgecss support. Usage ↗
@roots/bud-react Adds react support. Usage ↗
@roots/bud-sass Adds sass preprocessor support. Usage ↗
@roots/bud-stylelint Adds stylelint support. Usage ↗
@roots/bud-tailwindcss Adds tailwindcss support. Usage ↗
@roots/bud-typescript Adds typescript support. Usage ↗
@roots/bud-vue Adds Vue framework support. Usage ↗
@roots/bud-wordpress-manifests Adds WordPress specific asset manifests for simpler enqueuing. Usage ↗

Alternative syntax

More advanced users may want to configure Bud's options more directly. The @roots/bud-framework container API allows for that.

Set the source directory path:

bud.paths.set('src', path.join(__dirname, 'inputDir'))

Set filetypes for webpack to resolve:

bud.options.set('webpack.resolve.extensions', ['.ts', '.tsx'])

Enable specific features:

bud.features.set('hot', true)

Hooks

Bud provides a system of 'hooks' to expose values in the webpack config for modification, replacement, testing, etc.

Some examples:

bud.hooks.on('webpack.externals', externals => ({
  $: 'jquery',
})

bud.hooks.on('webpack.output.filename', filename => '[name].[hash:4]')

bud.hooks.on('webpack.module.rules.css.test', /\.css$/)

You may also add new filters. This is probably most helpful in the context of authoring plugins.

const filteredValue = bud.hooks.filter(
  'plugin.filter.key',
  defaultValue,
)

Now, other plugins or the user can modify this value, same as above:

bud.hooks.on('plugin.filter.key', defaultValue =>
  defaultValue.shift(),
)

Contributing

Contributions are welcome from everyone.

We have contributing guidelines to help you get started.

Bud sponsors

Help support our open-source development efforts by becoming a patron.

Community

Keep track of development and community news.