Build Process

Relevant source files

The following files were used as context for generating this wiki page:

• src/bundle.ts
• package.json
• tsconfig.json
• tsconfig.module.json
• src/index.ts
• src/styles.scss

The consent-manager project employs a multi-faceted build process orchestrated by npm scripts. This process uses tools like the TypeScript compiler (tsc), esbuild for bundling, and sass for stylesheet compilation. The primary goal is to transpile the TypeScript source code into various JavaScript module formats and browser-ready bundles, ensuring compatibility across different consumption environments, from Node.js and modern bundlers to direct browser script includes via CDNs.

The build process generates a dist/ directory containing all distributable artifacts. This includes CommonJS modules, ES modules, minified and non-minified browser bundles, and corresponding CSS files. The package.json file defines the entry points for these different formats, making the package versatile for developers.

Sources: package.json:37-56, tsconfig.json, src/bundle.ts

Build Scripts

The core of the build process is defined in the scripts section of package.json. The main build script is an aggregator that runs multiple sub-tasks in parallel using npm-run-all.

Sources: package.json:37-47

The following diagram illustrates the high-level build flow initiated by npm run build.

This diagram shows how the main build script triggers parallel compilation and bundling tasks.
Sources: package.json:39-47

Key Build Scripts

The table below summarizes the primary build scripts and their functions.

Script	Command	Description
prebuild	rm -rf dist/	Cleans the dist/ directory before a new build.
build	run-p build:*	Runs all build:* scripts in parallel.
build:main	tsc -p tsconfig.json	Compiles TypeScript to CommonJS modules in dist/main.
build:module	tsc -p tsconfig.module.json	Compiles TypeScript to ESNext modules in dist/module.
build:bundle	esbuild src/bundle.ts --bundle ...	Creates a non-minified browser bundle at dist/consent-manager.js.
build:bundle-min	esbuild src/index.ts --bundle --minify ...	Creates a minified browser bundle at dist/consent-manager.min.js.
build:styles	sass src/styles.scss:dist/consent-manager.css	Compiles SCSS to a standard CSS file.
build:styles-min	sass ... --style compressed	Compiles SCSS to a minified CSS file.

Sources: package.json:38-47

TypeScript Compilation

The project produces two distinct module formats from its TypeScript source: CommonJS and ESNext. This is achieved using two separate TypeScript configuration files.

Sources: tsconfig.json, tsconfig.module.json

CommonJS Module (build:main)

The build:main script uses tsconfig.json to compile the source files into the CommonJS format, which is standard in Node.js environments.

• Target: es2017
• Module System: commonjs
• Output Directory: dist/main
• Declaration Files: true (generates .d.ts files)

This output is designated as the main entry point in package.json.

// package.json
"main": "dist/main/index.js",
"types": "dist/main/index.d.ts",

Sources: package.json:6-7, tsconfig.json:3-7

ESNext Module (build:module)

The build:module script uses tsconfig.module.json, which extends the base tsconfig.json but overrides key settings to produce modern ES modules.

• Target: esnext
• Module System: esnext
• Output Directory: dist/module

This output is designated as the module entry point in package.json, used by modern bundlers like Webpack or Rollup.

// package.json
"module": "dist/module/index.js",

Sources: package.json:8, tsconfig.module.json:3-6

Browser Bundling (esbuild)

The project uses esbuild to create single-file JavaScript bundles for direct use in browsers. Two main bundles are generated.

Sources: package.json:42-43

Unpkg/Development Bundle (build:bundle)

The build:bundle script takes src/bundle.ts as its entry point. This file imports the core classes (ConsentManager, DOMConnector, GrantsInterface) and attaches them to the global window object. This makes the library's components immediately available when the script is included via a <script> tag in a non-module context.

// src/bundle.ts
import ConsentManager from './modules/ConsentManager';
window.ConsentManager = ConsentManager;

import DOMConnector from './modules/DOMConnector';
window.DOMConnector = DOMConnector;

import GrantsInterface from './modules/GrantsInterface';
window.GrantsInterface = GrantsInterface;

This script generates a non-minified, sourcemapped file at dist/consent-manager.js.

Sources: package.json:42, src/bundle.ts:1-7

Production/CDN Bundle (build:bundle-min)

The build:bundle-min script uses src/index.ts as its entry point. This file is the primary export point for the ES module structure. The script bundles, minifies, and sourcemaps the code, outputting it to dist/consent-manager.min.js. This file is specified as the unpkg field in package.json, making it the default for CDN usage.

// src/index.ts
import ConsentManager from './modules/ConsentManager';
export default ConsentManager;

export { default as DOMConnector } from './modules/DOMConnector';
export { default as GrantsInterface } from './modules/GrantsInterface';

Sources: package.json:9, 43, src/index.ts:1-5

Stylesheet Compilation (sass)

The project's UI styles are written in SCSS and compiled to CSS using the sass CLI.

• build:styles: Compiles src/styles.scss to dist/consent-manager.css.
• build:styles-min: Compiles src/styles.scss to dist/consent-manager.min.css with the --style compressed flag for minification.

These CSS files provide the default styling for the GrantsInterface UI components.

Sources: package.json:44-45, src/styles.scss

Distribution Outputs

The package.json file defines how the built artifacts in the dist/ directory are exposed to consumers.

Field	Value	Description
main	dist/main/index.js	The CommonJS entry point for Node.js environments.
types	dist/main/index.d.ts	The TypeScript declaration file for type support.
module	dist/module/index.js	The ES module entry point for modern bundlers.
unpkg	dist/consent-manager.min.js	The minified browser bundle for CDN usage.
files	["dist/", ...]	Specifies that the entire dist/ directory is included in the published npm package.

Sources: package.json:6-13

Summary

The build process for consent-manager is robust and configured to support a wide range of JavaScript environments. By leveraging tsc for type-safe compilation into both CommonJS and ES modules, esbuild for efficient browser bundling, and sass for styling, the project produces a well-structured and versatile set of distributable files. The package.json configuration ensures that consumers can seamlessly integrate the library into their projects, whether they are using server-side Node.js, a modern front-end build pipeline, or a simple browser script include.