ReferenceError: требование не определено для связующего пакета js - PullRequest
Новая
       101

ReferenceError: требование не определено для связующего пакета js

1 голос
/ 16 апреля 2020

Итак, я использовал накопительный пакет для объединения файлов js, созданных для использования с тремя js. Я подумал о том, чтобы свернуть и объединить три файла js, используя накопительный пакет js. Я использовал npm и установил три и свел, используя команду npm install rollup three. Созданный индексный файл. 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'
  }
}]

Окончательный пакет. js файл, созданный после работает rollup --config is: 

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

У меня есть следующие сомнения с данным пакетом. js файл, который генерируется: 1. Пакет js в том виде, как он создан, использует require, что приводит к ReferenceError: require is not defined for rollup 2. Во-вторых, не знаете, почему связанная версия не является на самом деле полной минимизированной версией созданного файла js?

Отлично, если кто-то может предложить возможную проблему?

1 Ответ

1 голос
/ 16 апреля 2020

Существует минимальный пример проекта, если вы используете npm версию three.js и строите свой проект с помощью rollup. Здесь демонстрируются все биты, необходимые для правильной настройки:

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

Несколько комментариев к вашему вопросу:

  • Похоже, вы импортируете не все классы из пакета three. Например, BoxGeometry или MeshNormalMaterial отсутствуют.
  • Кроме того, вы ссылаетесь на класс Mesh в пространстве имен THREE, что явно неверно.
  • При импорте npm пакеты, сведение требует использования @rollup/plugin-node-resolve.
  • Сокращение не происходит автоматически. Для этого вам нужно использовать отдельный плагин, например rollup-plugin-terser .

За исключением последнего пункта, в упомянутом примере проекта реализованы все вышеперечисленные шаги, необходимые для правильная сборка.

...