Build Setup

Bundling

This library exposes a main CJS bundle for backwards compatibility as well as a module entry point for modern bundling tools that support module resolution. The CJS bundles that are included in the NPM package are deprecated and will be removed in the next major release.

To get started, pick a bundler of your choice:

• esbuild
• swc
• rollup
• webpack
• parcel

This list is not exhaustive, so feel free to look around for another tool that best suits your needs.

Example

The following basic example uses esbuild for bundling.

Required Dependencies

package.json

"dependencies": {
	"postprocessing": "x.x.x",
	"three": "x.x.x"
},
"devDependencies": {
	"esbuild": "x.x.x"
}

Example App

src/app.js

import { EffectComposer } from "postprocessing";
console.log(EffectComposer);

Build Scripts

package.json

"scripts": {
	"build": "esbuild src/app.js --bundle --minify --outfile=dist/app.js"
}

Use npm run build to generate the code bundle. Include the file in an HTML file to run it in a browser.

For more information about configuration, features and plugins, see the official documentation of your chosen bundler.

Transpilation

Code transpilation prevents certain optimizations such as tree-shaking. Therefore, this library provides untranspiled code in the form of modules. If you want your app to run in older browsers, you can use Babel or a similar tool to transpile your final bundle into ES5 code.

Required Dependencies

package.json

"devDependencies": {
	"@babel/core": "x.x.x",
	"@babel/preset-env": "x.x.x"
}

Example Configuration

babel.config.json

{
	"compact": false,
	"comments": false,
	"presets": ["@babel/preset-env"]
}

For more information, please refer to the Babel documentation. You will also need a plugin for your bundler to integrate the transpilation process in your build setup.