Question

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

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

meteor docs告诉我们使用import moment from 'moment';之类的导入。但是如何导入openseadragon，因为我很确定它不会使用ES6模块并且不会导出任何内容。

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

Answer 1

该项目（文档记录不完整）API页面指出

当需要使用像Require.js这样的加载程序时，OpenSeadragon也会返回一个AMD模块。

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

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包装器......

Answer 2

JS lib不必专门使用ES6 export关键字来公开符号，事实上npm模块仍然在绝大多数情况下使用CommonJS module.exports，因为即使包作者编写了他们的代码在ES6中，他们使用Babel将它们发布到npm。

在这种特定情况下，您需要使用import 'openseadragon';文件夹中某处的client/全局导入OpenSeadragon lib。

然后它将在window.OpenSeadragon上提供。

Answer 3

由于好的Yanick Rochon的答案在您的案例中似乎不起作用，请注意您仍然可以加载您的图书馆旧时尚＆＃34;方式，使用[project_root]/client/compatibility/ special folder。

该文件夹中的任何库都不会被Meteor加载到一个独立的范围内，而是加载＆＃34;按原样＃34;就好像是通过经典的<script>标签。

然后您的OpenSeadragon对象应该在全局范围内可用。

作为旁注，如果您需要简单的图像导航而不是OpenSeadragon高级功能，您可能有兴趣尝试Leaflet。它重量更轻但非常稳定且维护良好。

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

3 个答案: