Question

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

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

每个组件都遵循“”符号中的import *。

我想在项目中使用外部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</scritp>

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。

Answer 3

修改

是的，看起来有人分叉了图书馆并用它制作了一个NPM包。你看过https://github.com/sbolel/pano了吗？有一个ES6的例子。

安装包：

npm install --save pano

然后导入：

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

<强> ORIGINAL：

您可以使用以下方法异步加载脚本，或者如果您使用的是捆绑程序，则可以使用导入外部脚本的方法。例如，Webpack为此提供了Externals。

执行此操作后，您可以根据文档访问全局对象PANOLENS。在您的应用程序中使用它之前，您需要确保PANOLENS对象可用。

将以下内容添加到静态HTML中：

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

如果您计划仅在某个React组件中使用该脚本（假设您使用React），则可以使用诸如react-async-script-loader之类的库。这将允许您在特定组件上延迟加载脚本。它有许多属性可用于确定脚本何时可以使用。

同样，在脚本成功加载后，您可以通过全局PANOLENS变量访问该库来使用该库。

Answer 4

所以你会想要某种模块微光。如果您使用的是webpack，请尝试以下方法： https://github.com/webpack/docs/wiki/shimming-modules

浏览器也有类似的垫片： https://github.com/thlorenz/browserify-shim

你也可以分叉回购并手动填充这样的东西，但实现可能会有所不同。

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

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

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

4 个答案: