问题
Hello and thank you for your time, I am beginner learning JavaScript and I would like to know how is this difficulty faced:
We would like to import module A which is a npm module and has ES6 export syntax:
import * as A from 'a';
Then, we would like to use another file which has also ES6 export and depends on the first one, so it would be used as: A.B
import B from 'b';
Why does the console output the following?
B.js
Reference Error: A is not defined
If you are curious, this is a generalization of the issue being faced trying to integrate THREE (A) with NRRDLoader (B):
https://github.com/YoneMoreno/ThreeReactNRRDLoaderStandalone.git
EDIT:
To put in context this question I show the exact files being involved:
App.js (main React / JavaScript App file)
import React, {Component} from 'react';
import './App.css';
import * as THREE from "three";
import NRRDLoader from '../node_modules/three/examples/js/loaders/NRRDLoader';
import TrackballControls from '../node_modules/three/examples/js/controls/TrackballControls';
class App extends Component {
constructor(props) {
super(props);
this.stop = this.stop.bind(this);
this.start = this.start.bind(this);
this.animate = this.animate.bind(this)
}
componentDidMount() {
const width = this.mount.clientWidth;
const height = this.mount.clientHeight;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(
75,
width / height,
0.1,
1000
);
scene.add(camera);
const loader = new NRRDLoader();
loader.load("models/columnasegmentado01.nrrd", function (volume) {
let sliceZ;
//z plane
const indexZ = 0;
sliceZ = volume.extractSlice('z', Math.floor(volume.RASDimensions[2] / 4));
sliceZ.name = 'foo';
console.log(sliceZ);
scene.add(sliceZ.mesh);
});
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
renderer.setClearColor('#000000');
renderer.info.autoReset = false;
console.log(renderer.info);
this.scene = scene;
window.scene = scene;
this.camera = camera;
this.renderer = renderer;
let controls = new TrackballControls(camera, renderer.domElement);
controls.rotateSpeed = 0;
controls.zoomSpeed = 5;
controls.panSpeed = 2;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
this.mount.appendChild(this.renderer.domElement);
this.start()
}
componentWillUnmount() {
this.stop();
this.mount.removeChild(this.renderer.domElement)
}
// Perhaps this is added for performance reasons?
shouldComponentUpdate() {
return false
}
start() {
if (!this.frameId) {
this.frameId = requestAnimationFrame(this.animate)
}
}
stop() {
cancelAnimationFrame(this.frameId)
}
animate() {
this.renderScene();
this.frameId = window.requestAnimationFrame(this.animate)
}
renderScene() {
this.renderer.render(this.scene, this.camera)
}
render() {
return (
<div
style={{width: '2000px', height: '2000px'}}
ref={(mount) => {
this.mount = mount
}}
/>
)
}
}
export default App;
Three.module.js (A):
https://github.com/mrdoob/three.js/blob/dev/build/three.module.js
NRRDLoader (B):
https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/NRRDLoader.js
Thank you for your help!
来源:https://stackoverflow.com/questions/49192782/javascript-how-could-we-import-es6-modules-which-are-interdependent