Question

您好，感谢您的时间，我是初学者学习JavaScript，我想知道这个困难是如何面对的：

我们想导入 A 模块，它是一个npm模块并具有ES6导出语法：

import * as A from 'a';

然后，我们想使用另一个也是ES6导出的文件并依赖于第一个文件，因此它将用作： A.B

import B from 'b';

为什么控制台会输出以下内容？

B.js

Reference Error: A is not defined

如果你很好奇，这是试图将三个（A）与NRRDLoader（B）整合的问题的概括：

https://github.com/YoneMoreno/ThreeReactNRRDLoaderStandalone.git

编辑：

为了说明这个问题，我会展示所涉及的确切文件：

App.js（主要的React / JavaScript App文件）

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

感谢您的帮助！

JavaScript：我们如何导入相互依赖的ES6模块？

0 个答案: