无法将 Cropper.js 模块包含到我的代码中

Question

为了向我的 Flask/Jinja 页面之一添加图像裁剪支持，我遵循 GitHub 上的 Cropper.js usage example，将 CSS link 添加到 <head> 我的 HTML 页面并将以下内容添加到我页面的 <body>：

<script src="/static/assets/js/plugins/cropper.min.js" type="module"></script>
<script>
    import Cropper from "cropperjs";

    const image = document.getElementById('crop_image');
    const cropper = new Cropper(image, {
        aspectRatio: 1 / 1,
        crop(event) {
            console.log(event.detail.x);
            console.log(event.detail.y);
            console.log(event.detail.width);
            console.log(event.detail.height);
            console.log(event.detail.rotate);
            console.log(event.detail.scaleX);
            console.log(event.detail.scaleY);
        },
    });
</script>

可以找到cropper.min.js文件，我在Firefox 77.0.1浏览器控制台看到的
但是，我确实在控制台中收到以下错误消息：

SyntaxError: import declarations may only appear at top level of a module

在JS的第一行<script>:

import Cropper from "cropperjs";

我发现这个错误可能是由于缺少 type="module" 而在 Firefox 中出现的，但是正如你所看到的，我的代码中确实有这个错误。还有其他想法这里可能有什么问题吗？

Answer 1

您在外部脚本上有 type=module，但在由于存在导入而失败的脚本上没有，type=module 没有。

所以

<script type="module">
    import Cropper from "cropperjs";

应该可以解决问题

Answer 2

好的，终于找到解决方案了。备案：

我需要从 JS 脚本 中删除 type="module" 部分 link，并且 还删除 import Croppe 行。两者都删除后现在可以使用了。

Answer 3

我遇到了同样的问题。这解决了。

将整个包（及其所有依赖项）安装到您选择的静态文件夹中很重要。这应该完整地安装整个包：

npm install cropperjs

从该包的 dist 文件夹调用模块将确保调用其所有依赖项。因此，我脑子里有以下内容：

<link rel="stylesheet" href="{% static 'styles/cropperjs/dist/cropper.css' %}">

脚本部分中的这个：

<script type="text/javascript" src="{% static 'styles/cropperjs/dist/cropper.js' %}"></script>

另外，就像@Matthias 建议的那样，您不需要 import 语句，无论是内联脚本还是不同的 JS 文件。

无法将 Cropper.js 模块包含到我的代码中

Can't include the Cropper.js module into my code

javascript

cropperjs