Build Setup

Bundling

This library exposes a standard main ES5 bundle for backwards compatibility as well as the default module entry point for modern bundlers such as Rollup and Webpack.

Rollup

If you don't have a personal preference, choose Rollup for bundling.

Required Development Dependencies

package.json

"devDependencies": {
	"@babel/core": "x.x.x",
	"@babel/preset-env": "x.x.x",
	"rollup": "x.x.x",
	"rollup-plugin-babel": "x.x.x",
	"rollup-plugin-minify": "x.x.x",
	"rollup-plugin-node-resolve": "x.x.x"
}

Example Configuration

rollup.config.js

import babel from "rollup-plugin-babel";
import minify from "rollup-plugin-babel-minify";
import resolve from "rollup-plugin-node-resolve";

const globals = { three: "THREE" };

export default [{

	input: "src/index.js",
	external: Object.keys(globals),
	plugins: [resolve(), babel(), minify()],
	output: {
		file: "build/bundle.js",
		format: "iife",
		globals
	}

}];

For more information, see the official Rollup documentation.

Webpack

If your project imports code from third-party libraries, make sure that those libraries are not excluded from the transpilation process. Don't exclude the entire /node_modules/ directory.

Required Development Dependencies

package.json

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

Example Configuration

webpack.config.js

const path = require("path");
const webpack = require("webpack");

module.exports = {

	entry: "./src/index.js",

	output: {
		filename: "bundle.js"
	},

	externals: {
		three: "THREE"
	},

	module: {
		rules: [{
			test: /\.js$/,
			include: [
				path.resolve(__dirname, "src")
			],
			use: {
				loader: "babel-loader",
				options: {
					presets: ["@babel/preset-env"]
				}
			}
		}]
	},

	plugins: [
		new webpack.optimize.UglifyJsPlugin({
			include: /\.js$/
		})
	]

};

For more details on how to setup Webpack, take a look at the official Webpack documentation.

Transpilation

Code transpilation prevents certain optimizations such as tree-shaking. Therefore, this library primarily provides untranspiled code in the form of modules. It's recommended to use Babel or a similar tool to transpile your final bundle into ES5 code.

Example Configuration

babel.config.js

module.exports = function(api) {

	api.cache.forever();

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

};

For more information, please refer to the Babel documentation.