无法让 MiradorImageTools 插件工作答案

【问题标题】：Can't get MiradorImageTools Plugin to work无法让 MiradorImageTools 插件工作
【发布时间】：2021-01-29 23:17:06
【问题描述】：

我正在尝试让 MiradorImageTools 插件与 mirador 图像查看器一起使用。

我正在使用一个非常基本的html页面进行测试：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mirador-Test</title>
</head>

<body>
  <h1>Title</h1>
  <div>
    <p>blah</p>
    <div id="my-mirador" />

    <script src="https://unpkg.com/mirador@latest/dist/mirador.min.js"></script>
    <script src="https://unpkg.com/mirador-image-tools@0.10.0/umd/mirador-image-tools.min.js"></script>

    <script type="text/javascript">
      const config = {
        "id": "my-mirador",
        "manifests": {
          "https://iiif.lib.harvard.edu/manifests/drs:48309543": {
            "provider": "Harvard University"
          }
        },
        "windows": [
          {
            "imageToolsEnabled": "true",
            "manifestId": "https://iiif.lib.harvard.edu/manifests/drs:48309543",
          }
        ]
      };

      // var mirador = Mirador.viewer(config);
      var mirador = Mirador.viewer(config, [MiradorImageTools]);  // <-- Error!

    </script>
  </div>
</body>

</html>

这给了我以下错误：

Uncaught ReferenceError: MiradorImageTools is not defined
    <anonymous> ./test3.html:36
test3.html:36:45

如果我不使用插件，用上面的注释行替换有问题的行，整个事情就可以正常工作，我会得到 mirador 应有的显示。

很明显我引用了错误的插件。但正确的做法是什么？

【问题讨论】：

标签： javascript html plugins iiif

【解决方案1】：

要使用 MiradorImageTools 和任何其他 Mirador 插件（自 v3.0.0 起），您需要导入包并使用 Webpack 或 parcel 等工具创建项目的构建。

可以在此处查看此类设置的示例：https://github.com/projectmirador/mirador-integration，其中包括使用 Webpack 和 parcel 的示例。

./src/index.js
import Mirador from 'mirador/dist/es/src/index';
import { miradorImageToolsPlugin } from 'mirador-image-tools';

const config = {
  id: 'demo',
  windows: [{
    imageToolsEnabled: true,
    imageToolsOpen: true,
    manifestId: 'https://purl.stanford.edu/sn904cj3429/iiif/manifest',
  }],
  theme: {
    palette: {
      primary: {
        main: '#1967d2',
      },
    },
  },
};

Mirador.viewer(config, [
  ...miradorImageToolsPlugin,
]);

有关如何为特定工具构建的更多信息，请参阅那里的自述文件。

【讨论】：

我明白了，谢谢。我希望能够仅使用unpkg.com 和纯 HTML，因为这一切都是在 python 脚本中动态创建的，因此必须使用构建工具会使事情变得更加复杂。既然这适用于 mirador 本身，我希望插件也是如此。但在那种情况下，我猜它不是......
对不起，是的，我也希望如此。希望未来的工作可以改善这一点，但由于依赖项在插件中的工作方式，我们不得不这样做。 :(