@bloomstack/bcore-bundler

BCore extensible esbuild configurations

This repository holds bcore's js bundler default configurations. If you are developing bcore apps you can use this bundler to kickstart your project's js dependencies.

The bundler expects your application's directory structure in a particular layout generated by bcore. See bcore for more information.

CLI Usage:

After adding this package to your packages.json dev dependencies you can run the following commands to build and/or watch your js files:

bundle

yarn bcore-builder bundle

watch

yarn bcore-builder watch

Adding to packages scripts

To keep things shorter and easier on your wrists, you should add bcore-builder calls in your packages script section as follows:

{
  ...
  "scripts": {
    "build": "bcore-builder bundle",
    "watch": "bcore-builder watch"
  },
  ...
}

Extending configuration

If you want to modify the esbuild configuration object you can import the builder's package and directly use its internal build method directly or import the cli to reuse the terminal interface.

Lets say you want to reuse the cli. In your codebase add ./cli.js:

import { cli } from "@bloomstack/bcore-bundler/cli.js"

await cli(import.meta, (config) => {
  // You can modify config here and return it.

  // This configuration is used for both bundling and watching.

  // The config object is directly passed to esbuild so all of
  // esbuild options are usable here.
  return config;
});

Otherwise, if you want to build your own cli interface and only require running builds and/or watching for file changes. In your code base add ./builder.js:

import { build } from "@bloomstack/bcore-bundler";

await build({
  path: ".",            // The root path of your bcore application in your file
                        // system. This defaults to the current working director.
  watch: false,         // set to true to watch instead of only bundling.
  production: false,    // set to true to bundle into ./dist folder and minify.
  format: "esm",        // set to cjs or esm to change file format. Defaults to
                        // esm for now.
  analyze: false,       // set to true if you would like to see a detailed bundle
                        // statistics.
  minify: false,        // set to true if you want bundles minified irrespective of
                        // production/develop setting.
  configure(config) {
    // You can modify config here and return it.
    
    // This configuration is used for both bundling and watching.

    // The config object is directly passed to esbuild so all of
    // esbuild options are usable here.
    return config;
  }
});

Features

• Watches files live and re-bundles them.
• Sends a refresh message event on port 7000 to allow bcore to refresh your website as development happens.
• Bundles *.bundle.scss and *.bundle.less into single bundle files. Generated files will always contain a hash appended to them to enforce new files to load.
• Compiles less and scss into css strings for your js application to import. ex:

  import css from "./style.scss";
  
  ... use css string some how ...