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

Posted 2023-02-22

【中文标题】如何使用 ES6 样式导入添加外部 javascript 库？

【英文标题】：How do you add external javascript libraries using ES6 style imports?

【发布时间】：2017-07-03 12:35:07

【问题描述】：

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

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

如果我想将它包含到我的项目中，我应该怎么做？

【参考方案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>
        )
    

【参考方案2】：

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

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

【讨论】：

问题是 Panolens 没有在窗口上全局公开那个 PANOLENS 变量。

@d4rklit3 确实如此，我只是查看了源代码。

奇怪的是我在找它，他把它暴露在其他地方了吗？

这就像在主要出口中的方式。我打开了原始文件，它已经下降了数千行。他公开了window.panolens = ，所以我假设他将方法绑定到它上面。如果他不这样做，那就太奇怪了。

aah 我一直在寻找 PANOLENS，因为实现是新的 PANOLENS.viewer() 或其他任何东西

【参考方案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()

原文：

您可以使用以下方法异步加载脚本，或者如果您使用捆绑器，它可以导入外部脚本。例如，Webpack 对此有 Externals。

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

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

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

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

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

【讨论】：

我看了一下，可惜它看起来很旧，只实现了 PanoElement 和 PanoPage。

啊，我明白了，不用担心。

【参考方案4】：

所以你会想要某种模块闪光。如果你使用 webpack，你应该试试这个： https://github.com/webpack/docs/wiki/shimming-modules

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

您也可以像这样手动分叉 repo 并手动填充它，但实现可能会有所不同。

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

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