如何使用ES6样式导入添加外部JavaScript库？ [英] How do you add external javascript libraries using ES6 style imports?

问题描述

我无法理解如何在较新的ES6项目中使用较旧的JavaScript库。

I'm having trouble understanding exactly how to use older javascript libraries within newer ES6 projects.

我正在看一个用webpack编译的React项目，用ES6编写并用Babel编译。

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.

我想在项目中使用外部JavaScript库： https://github.com/pchen66/panolens.js

There's an external javascript library I want to use within the project: https://github.com/pchen66/panolens.js

编译库不遵循es6导出格式，只有一个全局对象PANOLENS。

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?

推荐答案

这不是最好的。

将它包含在你的HTML中

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</scritp>

bundle.js已构建javascript代码

bundle.js is builded javascript code

您可以在任何地方使用PANOLENS对象。

You can use PANOLENS object anywhere.

示例组件

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>
        )
    }
}

这篇关于如何使用ES6样式导入添加外部JavaScript库？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！