ReferenceError：没有为汇总包js定义要求答案

【问题标题】：ReferenceError: require is not defined for rollup bundle jsReferenceError：没有为汇总包js定义要求
【发布时间】：2020-04-16 15:18:39
【问题描述】：

所以，我一直在使用汇总来捆绑我的 js 文件，这些文件是为与三个 js 一起使用而创建的。我想到的是使用 rollup 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.创建的bundle js使用require，结果为ReferenceError: require is not defined for rollup 2.其次，不知道为什么捆绑的版本不是真正的生成的js文件的完整缩小版？

太好了，如果有人能提出可能的问题？

【问题讨论】：

标签： javascript three.js rollup rollupjs

【解决方案1】：

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

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

你的问题的几个问题：

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

除了最后一点，上述示例项目实现了正确构建所需的所有上述步骤。

【讨论】：