Bundling external dependencies

Working with assets

When adding some static JS or CSS assets (including CoffeeScript or SCSS), Sake can transpile and minify those via npx sake watch (when making changes on the fly in active development) or npx sake compile (which also supports arguments or sub commands to specify the assets to compile).

These tasks typically require no special configuration and should work in any plugin project that utilizes Sake.

Bundling assets

However, there are cases where one would want to bundle certain JS dependencies from an external distributed package via NPM. For this use case Sake supports a bundle task.

This task will install non-dev JS dependencies and move intended built assets into a designated folder within the plugin structure.

This command is part of the build task which will also run during deploys to ensure that any defined dependencies will be bundled to a distributable plugin zip file.

For this task to work properly when required, it needs to have instructions in the project's Sake configuration file. For example:

given the following dependency defined in the project's package.json

  "dependencies": {
    "@gdcorp-partners/woocommerce-gateway-cybersource": "2.8.1"
  }

and given the following configuration in the project's sake.config.js

module.exports = {
    framework: 'v5',
    autoload: true,
    bundle: {
        scripts: [
             {
                 source: '@gdcorp-partners/woocommerce-gateway-cybersource/dist',
                 file: 'wc-cybersource-checkout-block.js',
                 destination: 'assets/js/blocks',
            }
        ],
        styles: [
            {
                source: '@gdcorp-partners/woocommerce-gateway-cybersource/dist',
                file: 'wc-cybersource-checkout-block.css',
                destination: 'assets/css/blocks',
            }
        ],
    }
}

...when the bundle task is run, it will look for the node_modules package indicated in source, and copy the indicated file for each and move it into the destination folder relative to the project's root.

How these assets will be enqueued or utilized in the project will be determined by the project's code, but the task will allow to bundle the external asset into the plugin codebase and make it distributable as part of the plugin static assets. This is desirable when development of the JS assets happens on a separate repository and/or needs to be fetched from an external source like via NPM.

Note

It is important to remember that the bundle task is not responsible for bumping the dependency in package.json and this is intended as any package update should be manually done via npm install or npm update when appropriate.