ReferenceError：未为汇总包js定义require

Question

因此，我一直在使用汇总来捆绑我的js文件，这些文件是为与三个js一起使用而创建的。我想到的是使用汇总js最小化和捆绑三个js文件。我使用npm并安装了三个，并使用命令npm install rollup three进行汇总。创建的index.js文件为：

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()

使用的汇总配置为rollup.config.js：

export default [{
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  }
}]

运行rollup --config后生成的最终bundle.js文件是：

'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();

对于生成的给定bundle.js文件，我存在以下疑问：1.创建的包js使用require，结果为ReferenceError: require is not defined for rollup2.其次，不确定为什么捆绑版本不是真正的js文件的完整缩版吗？

很好，如果有人可以建议可能的问题？

Answer 1

实际上，如果您使用npm的three.js版本并通过rollup来构建项目，则实际上是一个最小的示例项目。它演示了正确设置所需的所有位：

https://github.com/Mugen87/three-jsm

对您的问题的几点评论：

• 似乎您没有从three包中导入所有类。例如BoxGeometry或MeshNormalMaterial丢失。
• 此外，您正在通过Mesh命名空间引用THREE类，这显然是错误的。
• [导入npm程序包时，汇总需要使用@rollup/plugin-node-resolve。
• 不会自动缩小。您需要为此使用单独的插件，例如rollup-plugin-terser。

除了最后一点，上述示例项目执行了上述所有步骤，对于正确的构建是必需的。