How do you add external javascript libraries using ES6 style imports?

Question

I'm having trouble understanding exactly how to use older javascript libraries within newer ES6 projects. I'm looking at a React project that's been compiled with webpack, written with ES6 and transpiled with Babel. Each component follows the import * from "" notation.

There's an external javascript library I want to use within the project: https://github.com/pchen66/panolens.js. The compiled library doesn't follow ES6 export format, and only has one global object PANOLENS.

What should I do if I want to include this into my project?

Answer 1

This is not the best.

Include it in your html :

<script src="js/three.min.js"></script> 
<script src="js/panolens.min.js"></script>
<script src="bundle.js"></script>
<script>window.PANOLENS = PANOLENS</script>

Where bundle.js is your own builded javascript code.

Then, you will be able to use PANOLENS object anywhere.

Example component :

import react, {Component} from 'react'

export default class Test extends Component {
    componentDidMount(){
        var panorama, viewer;

        panorama = new window.PANOLENS.ImagePanorama('asset/equirectangular.jpg' );

        viewer = new window.PANOLENS.Viewer(
            container: document.getelementbyid('viewer-container'),   // A DOM Element container
            controlBar: true,           // Vsibility of bottom control bar
            controlButtons: [],         // Buttons array in the control bar. Default to ['fullscreen', 'setting', 'video']
            autoHideControlBar: false,  // Auto hide control bar
            autoHideInfospot: true,     // Auto hide infospots
            horizontalView: false,      // Allow only horizontal camera control
            cameraFov: 60,              // Camera field of view in degree
            reverseDragging: false,     // Reverse orbit control direction
            enableReticle: false,       // Enable reticle for mouseless interaction
            dwellTime: 1500,            // Dwell time for reticle selection in millisecond
            autoReticleSelect: true,    // Auto select a clickable target after dwellTime
            passiveRendering: false,    // Render only when control triggered by user input 
        );
        viewer.add( panorama );
    }
    render(){
        return(
            <div id='viewer-container'></div>
        )
    }
}