JavaScript: How could we import ES6 modules which are interdependent?

ε祈祈猫儿з 提交于 2019-12-11 17:24:20

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!