如何使用 ES6 样式导入添加外部 javascript 库？

Question

我无法准确理解如何在新的 ES6 项目中使用旧的 javascript 库。我正在研究一个使用 webpack 编译、使用 ES6 编写并使用 Babel 转译的 React 项目。每个组件都遵循import * from ""符号。

我想在项目中使用一个外部 javascript 库： https: //github.com/pchen66/panolens.js。编译后的库不遵循ES6导出格式，并且只有一个全局对象PANOLENS。

如果我想将其纳入我的项目中，我该怎么办？

Answer 1

这不是最好的。

将其包含在您的 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>

bundle.js你自己构建的 javascript 代码在哪里？

然后，您将能够在任何地方使用 PANOLENS 对象。

示例组件：

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

Answer 2

模块本身是否遵循 ES6 语法并不重要。它将遵循 commonJS 或 AMD，这两种 webpack 都可以处理，最坏的情况是，您可以只需要/将整个文件导入到您的包中：https://www.npmjs.com/package/panolens.js。

编辑：如果你查看 dist，这个 npm 模块/repo确实使用 module.exports 。