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 piled with webpack, written with ES6 and transpiled with Babel. Each ponent follows the import * from "" notation.

There's an external javascript library I want to use within the project: .js. The piled 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?

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 piled with webpack, written with ES6 and transpiled with Babel. Each ponent follows the import * from "" notation.

There's an external javascript library I want to use within the project: https://github./pchen66/panolens.js. The piled 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?

• javascript
• reactjs
• webpack
• ecmascript-6

4 Answers 4

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 ponent :

import react, {Component} from 'react'

export default class Test extends Component {
    ponentDidMount(){
        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>
        )
    }
}

It doesn't really matter if the module itself follows ES6 syntax. It will either follow monJS or AMD, both of which webpack can handle, and at worst, you can just require/import the whole file into your bundle: https://www.npmjs./package/panolens.js.

EDIT: This npm module/repo does use module.exports if you look at the dist.

EDIT:

Yeah, it looks like someone has forked the library and made an NPM package out of it. Have you taken a look at https://github./sbolel/pano. There is an ES6 example.

Install the package:

npm install --save pano

Then import:

import Pano from 'pano'
import { Page } from 'pano'
// Pano.Page === Page
const panoPage = new Page('pano')
panoPage.init()

ORIGINAL:

You could load the script asynchronously using the method below, or if you are using a bundler, it would have a way to import external scripts. For example, Webpack has Externals for this.

After doing this, you can access the the global object PANOLENS, as per the documentation. You'll want to make sure the PANOLENS object is available before using it in your application.

Add the following to your static HTML:

<script src="https://github./pchen66/panolens.js" async></script>

If you are planning to only use the script in a certain React ponent (presuming you use React), you could use a library such as react-async-script-loader. This will allow you to lazy load a script on a particular ponent. It has a bunch of properties that can be used to determine when the script is ready to be used.

Again, after the script has successfully loaded, you may use the library by accessing it through the global PANOLENS variable.

So you would want some kind of module shimmer. If you are using webpack you should try this: https://github./webpack/docs/wiki/shimming-modules

There are similar shims for browserify too: https://github./thlorenz/browserify-shim

You could also fork the repo and shim it manually something like this, the implementations may vary though.

/**
 * Panolens.js
 * @author pchen66
 * @namespace PANOLENS
 */

var PANOLENS = { REVISION: '3' };
module.exports = PANOLENS;