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

【问题标题】：Import external Javascript libraries installed via npm in Meteor 1.3在 Meteor 1.3 中导入通过 npm 安装的外部 Javascript 库
【发布时间】：2016-12-17 11:32:08
【问题描述】：

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

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

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

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

【问题讨论】：

"漂亮的用户，它不使用 ES6 模块并且不导出任何东西" 你试过了吗？标准 Node.js 样式怎么样：var OpenSeadragon = require('openseadragon')
@MikeC 我在openseadragon.js 文件中搜索了export，但找不到。所以我认为它可能没有使用 ES6 模块。我会尝试 require 方法。
你在使用 Blaze、React 还是 Angular 和 Meteor？
@YanickRochon 反应

标签： javascript node.js meteor npm ecmascript-6

【解决方案1】：

该项目的（记录不充分的）API 页面指出

OpenSeadragon 还会在需要使用 Require.js 之类的加载器时返回一个 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 包包装器...

【讨论】：

感谢您的详细解答。但它不起作用。在控制台中获取Uncaught TypeError: OpenSeadragon is not a function。而console.log(OpenSeadragon) 仍然打印一个空对象Object {}
OpenSeadragon 似乎没有正确实现它的 UMD，并且缺少 module.export。在这种情况下，您必须改为全局加载它。让我更新答案...

【解决方案2】：

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

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

然后它将在window.OpenSeadragon上可用。

【讨论】：

我不是专门指 ES6。搜索关键字export 在openseadragon.js 中返回零匹配，所以我相信它也不使用CommonJS module.exports。此外，console.log(openseadragon) 打印一个空对象，即 Object {} 和 import openseadragon from 'openseadragon';。
目前，我已将openseadragon.js 文件放在client/lib 文件夹中，因此它会自动加载为全局文件，但我认为这并不理想。
您将在我的回答中获得与解决方案相同的行为，除了您将能够通过 npm 自动更新它。
是的，这就是我现在正在做的事情。谢谢。

【解决方案3】：

由于不错的 Yanick Rochon 的回答似乎不适用于您的情况，请注意，您仍然应该能够使用 [project_root]/client/compatibility/ special folder 以“老式”方式加载您的库。

该文件夹中的任何库都不会由 Meteor 在独立范围内加载，而是“按原样”加载，就像通过经典的 <script> 标记一样。

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

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

【讨论】：

是的，目前，我已将openseadragon.js 文件放在client/lib 文件夹中，因此它会作为全局脚本自动加载，但我认为这并不理想。另外，我猜 Leaflet 是用于地图的。我需要渲染可缩放的图像。你知道有什么好的图书馆吗？是否可以使用 render 来渲染图像？
使用 Leaflet，您还可以使用简单的图像。请参阅 tutorial 和 L.imageOverlay()