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

Posted 2023-03-08

【中文标题】在 Meteor 1.3 中导入通过 npm 安装的外部 Javascript 库

【英文标题】：Import external Javascript libraries installed via npm in Meteor 1.3

【发布时间】：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 反应

【参考方案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()