在 React 组件中使用 NPM 包

Question

我尝试在我的 React 组件中使用 Pannellum NPM package。

Pannellum 的 API 可以这样使用：

pannellum.viewer('panorama', {
    "type": "equirectangular",
    "panorama": "https://pannellum.org/images/alma.jpg"
});

我想到了下面的代码：

import React, { Component } from 'react';
import './App.css';
import pannellum from 'pannellum';

class App extends Component {

  componentDidMount() {
    pannellum.viewer('panorama', {
      "type": "equirectangular",
      "panorama": "https://pannellum.org/images/alma.jpg"
    });
  }

  render() {
    return (
      <div id="panorama"></div>
    );    
  }
}

export default App;

会起作用。然而事实并非如此。我得到 TypeError: __WEBPACK_IMPORTED_MODULE_2_pannellum___default.a.viewer is not a function.

还尝试了不同的导入语句： import { pannellum } from 'pannellum';、const pannellum = require('pannellum'); 但这些也不起作用。

有趣的是，Pannellum 的 API javascript 代码是捆绑在一起的，一旦我注释掉 componentDidMount() 并尝试通过 Chrome 开发工具使用 API页面加载后，控制台就可以工作了。但是没有应用 CSS 样式。

我显然做错了什么。我看过 360-react-pannellum 包源代码，但我需要访问整个 API，而不仅仅是渲染，所以它不符合我的需要。

感谢您的帮助。

Answer 1

尝试

componentDidMount() {
    window.pannellum.viewer('panorama', {
      "type": "equirectangular",
      "panorama": "https://pannellum.org/images/alma.jpg"
    });
  }

Answer 2

查看 pannellum 的源代码，它没有导出任何模块，而是将所有内容放在 window 对象上。

尝试导入代码并直接从 window 使用它。

import React, { Component } from 'react';
import './App.css';
import 'pannellum';


class App extends Component {

  componentDidMount() {
    window.pannellum.viewer('panorama', {
      "type": "equirectangular",
      "panorama": "https://pannellum.org/images/alma.jpg"
    });
  }

  render() {
    return (
      <div id="panorama"></div>
    );    
  }
}

export default App;

在 React 组件中使用 NPM 包

Use NPM package in React Component

npm

reactjs

pannellum