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/plugin-babel": "x.x.x",
	"@rollup/plugin-node-resolve": "x.x.x",
	"rollup": "x.x.x",
	"rollup-plugin-terser": "x.x.x"
}

Example Configuration

rollup.config.js

import babel from "@rollup/plugin-babel";
import resolve from "@rollup/plugin-node-resolve";
import { terser } from "rollup-plugin-terser";

export default [{

	input: "src/index.js",
	plugins: [resolve(), terser(), babel({
		babelHelpers: "bundled"
	})],
	output: {
		file: "build/bundle.js",
		format: "iife"
	}

}];

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"
	},

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

	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.json

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

For more information, please refer to the Babel documentation.