Categories
Core

WooCommerce Dependency Extraction Webpack Plugin

WooCommerce Dependency Extraction Webpack Plugin is a tool for managing your extension’s WordPress and WooCommerce dependencies. It extends the WordPress version and adds WooCommerce functionality on top so you don’t need to declare dependencies when registering your app’s scripts.

To illustrate how the plugin can aid development, consider the following example. An app makes use of WooCommerce and WordPress JavaScript components to develop a modern UI:

import { Button } from '@wordpress/components';
import { Table } from '@woocommerce/components';

These components offer a way to quickly setup elements of a screen with baked in functionality and consistent styles. Not only do these dependencies need to be declared in package.json as you would any JavaScript dependencies, but they require special consideration because the assets can be made available on the global window removing the need to be bundled in the application’s code. Luckily, WooCommerce Dependency Extraction Webpack Plugin can handle these requirements on your behalf when webpack creates a build.

Specifically, an up-to-date dependency array is supplied to wp_register_script when the import statements are added to source code.

array( 'wc-components', 'wp-components' )

Also, webpack externals are configured to find those assets on the global window to prevent unnecessarily loading them as part of the application. All this is done automatically by the plugin when webpack compiles source code.

WooCommerce Dependency Extraction Webpack Plugin can be used independently but is made to work with the tooling wp-scripts offers. If you’d like to start a new WooCommerce extension with all this functionality already in place, check out the npm run create-wc-extension command at the root of a local WooCommerce Admin instance. Otherwise, usage instructions to include it in an existing project are below.

Usage Instructions

See the WordPress version for full instructions and API details.

Webpack

Use this plugin as you would other webpack plugins:

// webpack.config.js
const WooDependencyExtractionWebpackPlugin = require( '@woocommerce/dependency-extraction-webpack-plugin' );

module.exports = {
  // …snip
  plugins: [
    new WooDependencyExtractionWebpackPlugin(),
  ]
}

WordPress

Enqueue your script as usual and read the script dependencies dynamically:

$script_path       = 'path/to/script.js';
$script_asset_path = 'path/to/script.asset.php';
$script_asset      = file_exists( $script_asset_path )
	? require( $script_asset_path )
	: array( 'dependencies' => array(), 'version' => filemtime( $script_path ) );
$script_url = plugins_url( $script_path, __FILE__ );
wp_enqueue_script( 'script', $script_url, $script_asset['dependencies'], $script_asset['version'] );

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.