Recently, I've been utilizing rollup to bundle my JavaScript files designed for integration with three.js. It got me thinking about minimizing and bundling the three.js files using rollup.js as well.
To achieve this, I used npm and executed the command npm install rollup three.
Here is the content of the index.js file that was created:
import { Scene, PerspectiveCamera, WebGLRenderer } from 'three'
const scene = new Scene()
const camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10)
camera.position.z = 1
geometry = new BoxGeometry( 0.2, 0.2, 0.2 )
material = new MeshNormalMaterial()
mesh = new THREE.Mesh( geometry, material )
const basic = basicScene()
scene.add( mesh )
const renderer = new WebGLRenderer({antialias: true})
renderer.setSize( window.innerWidth, window.innerHeight )
document.body.appendChild( renderer.domElement )
function animate() {
requestAnimationFrame(animate)
mesh.rotation.x += 0.01
mesh.rotation.y += 0.01
renderer.render( scene, camera )
}
animate()
The rollup configuration that I used was rollup.config.js:
export default [{
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'cjs'
}
}]
After running rollup --config, the resulting bundle.js file was generated:
'use strict';var three=require('three');const scene = new three.Scene();
const camera = new three.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.z = 1;
geometry = new BoxGeometry( 0.2, 0.2, 0.2 );
material = new MeshNormalMaterial();
mesh = new THREE.Mesh( geometry, material );
const basic = basicScene();
scene.add( mesh );
const renderer = new three.WebGLRenderer({antialias: true});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
function animate() {
requestAnimationFrame(animate);
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;
renderer.render( scene, camera );
}
animate();
Upon inspecting the generated bundle.js file, I encountered a couple of issues:
1. The inclusion of require in the bundled script led to a
ReferenceError: require is not defined for rollupIf anyone could shed some light on the potential reasons behind these problems, it would be greatly appreciated.