我无法准确理解如何在较新的 ES6 项目中使用较旧的 javascript 库。我正在查看一个使用 webpack 编译、使用 ES6 编写并使用 Babel 转译的 React 项目。每个组件都遵循import * from "" 表示法。
我想在项目中使用一个外部 javascript 库：https://github.com/pchen66/panolens.js。编译后的库不遵循 ES6 导出格式，只有一个全局对象 PANOLENS。
如果我想将它包含到我的项目中，我应该怎么做？
【问题讨论】：
标签： javascript reactjs webpack ecmascript-6
这不是最好的。
将其包含在您的 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>
)
}
}
【讨论】：
模块本身是否遵循 ES6 语法并不重要。它将遵循 webpack 可以处理的 commonJS 或 AMD，在最坏的情况下，您可以将整个文件要求/导入到您的包中：https://www.npmjs.com/package/panolens.js。
编辑：如果您查看 dist，此 npm 模块/repo 确实使用 module.exports。
【讨论】：
window.panolens = {}，所以我假设他将方法绑定到它上面。如果他不这样做，那就太奇怪了。
编辑：
是的，看起来有人已经分叉了这个库并用它制作了一个 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 变量访问该库。
【讨论】：
所以你会想要某种模块闪光。如果你使用 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;
【讨论】：