javascript - 在 Meteor 1.3 中导入通过 npm 安装的外部 Javascript 库

Question

我想使用 OpenSeadragon我的 Meteor 应用程序中的库。由于 Meteor 1.3 提供了对 npm 模块的支持，我使用 meteor npm install openseadragon 通过 npm 安装它。

但现在我不确定如何使用它。 OpenSeadragon 文档仅提供 example使用 script 标签。

meteor docs告诉我们使用像 import moment from 'moment'; 这样的导入。但是我如何导入 openseadragon 因为我很确定它不使用 ES6 模块并且不导出任何东西。

如何使用 npm import 来使用它而不加载 openseadragon.js 作为整个应用程序的全局？

Answer 1

该项目的(记录不完整的)API 页面指出

OpenSeadragon will also return an AMD module when required with a loader like Require.js.

因此，在客户端脚本中，您可以简单地

import 'openseadragon';  // load globally

它应该给你模块构造函数

现在，根据您使用的是什么，您可以从该构造函数初始化您的容器。对于 React 容器，这看起来像这样:

import React, { Component } from 'react';
import { Random } from 'meteor/random';
import 'openseadragon';  // OpenSeadragon on global scope

export default class OpenSeedragonComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      options: {
        id: Random.id(),   // container unique name
        // other options here...
      }
    };
  }

  componentDidMount() {
    this.initialiseWidgets();
  }

  componentDidUpdate() {
    this.initialiseWidgets();
  }

  initialiseWidgets() {
    this.viewer = OpenSeadragon(this.state.options);
  }

  render() {
    return (
      <div id={ this.state.options.id } 
           width={ this.props.width || '800px' }
           height={ this.props.height || '600px' }
      >
      </div>
    );
  }
};

注意:在撰写本文时，加载 .map 文件时会出现错误。忽略它，或打开一个 issue与项目维护者一起，以便他将项目与 Meteor 正确集成。也许有人会为它写一个 react/meteor 包包装器......