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

Always use Babel to transpile your final bundle into ES5 code. Even if you are restricting yourself to only use ES5 syntax, you can't expect third-party libraries to avoid modern language features. Transpilation prevents certain code optimizations such as tree-shaking. Therefore, this library mainly provides untranspiled 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.