Bundling

Overview

Webpack bundling requires some additional configuration for proper integration of the digital-ink dependency with third-party technologies. The 'analyze' script tag provides an analysis of the bundle structure. A properly integrated digital-ink package should not contain any externals as a part of the bundling structure.

With React and Webpack (react-scripts)

This configuration targets create-react-app and react-scripts. It requires the react-app-rewired plugin.

/* package.json */

"devDependencies": {
	"react-app-rewired": "^2.x",
	"source-map-explorer": "^2.x"
}

react-app-rewired plugin requires some changes within the package.json scripts section:

/* package.json */

"scripts": {
	"analyze": "source-map-explorer 'build/static/js/*.js'",
	"start": "react-app-rewired start -host 0.0.0.0",
	"build": "react-app-rewired build",
	"test": "react-scripts test",
	"eject": "react-scripts eject"
}

Then, update webpack configuration with the following contents.

NB: some configurations target webpack 5 only; others, webpack 4 only.

/* config-overrides.js */
const webpack = require("webpack");

module.exports = function override(config, env) {
	if (!config.eternals) {
		config.externals = [];
	}

	if (!config.plugins) {
		config.plugins = [];
	}

	config.externals = [...config.externals, "bindings", "canvas", "gl", "systeminformation"];

	// ProvidePlugin should be used with webpack 4.x only, version 5.x is capable to resolve them by itself
	config.plugins.push(
		// expose some of public dependencies - these ones which do not provides ECMA 6 exports
		new webpack.ProvidePlugin({
			ClipperLib: "clipper-lib",
			poly2tri: "poly2tri",
			protobuf: "protobufjs",
			md5: "js-md5"
		})
	);

	return config;
}

With Nuxt and Webpack

/* nuxt.config.js */
import webpack from "webpack"

export default {
	...,

	// Build configuration
	build: {
		extend(config, ctx) {
			if (ctx.isDev && ctx.isClient) {
				...

				config.externals = ["bindings", "canvas", "gl", "systeminformation"]

				// exclude commonjs dependencies
				config.node = {
					fs: "empty",
					net: "empty",
					child_process: "empty"
				}
			}
		},

		plugins: [
			// ProvidePlugin should be used with webpack 4.x only, version 5.x capable to resolve them by itself
			// expose some of public dependencies - these ones which do not provides ECMA 6 exports
			new webpack.ProvidePlugin({
				ClipperLib: "clipper-lib",
				poly2tri: "poly2tri",
				protobuf: "protobufjs",
				md5: "js-md5"
			})
		]
	}
}

package.json scripts section:

/* package.json */

"scripts": {
	"analyze": "nuxt build --analyze",
	"build": "nuxt build",
	"dev": "nuxt --hostname 0.0.0.0",
	"start": "nuxt start --hostname 0.0.0.0",
	"generate": "nuxt generate"
}