javascript - fabric js 作为 ES6 在 Chrome 中的导入不起作用

标签 javascript fabricjs

在我的网站上,我不想捆绑而是直接使用 ES6 模块(适用于观众)

我尝试通过以下方式导入 fabric.js

import {fabric} from "../node_modules/fabric/dist/fabric.js"; 就像我捆绑时所做的那样(对于捆绑它工作正常)。

然而,当我启动网站时,我得到了

"Uncaught SyntaxError: The requested module '../node_modules/fabric/dist/fabric.js' does not provide an export named 'fabric'"

如果我把上面的改成 从“../node_modules/fabric/dist/fabric.js”导入 * 作为 FAB; 我明白了

Uncaught TypeError: Cannot read property 'fabric' of undefined at fabric.js:3224

关于如何在不捆绑的情况下直接将 fabric 用作 ES6 模块的想法? 不用说我在使用 Chrome 76.0.3809.132 时导入的其他模块没有这个问题

升级到 fabric 3.4 无果。让我在这里粘贴我的整个代码:html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <script type="module" src="./start.js"></script>
   </head>

   <body>

   </body>
</html>

以及我从中删除所有其他内容的 JS

从'../node_modules/fabric/dist/fabric.min.js'导入结构;

还是一样的错误

Uncaught SyntaxError: The requested module '../node_modules/fabric/dist/fabric.min.js' does not provide an export named 'default'

最佳答案

fabric.js 的编写方式不适用于 ES6 模块导入。这是因为 fabric 依赖于 this 作为浏览器环境中对 window 的引用,例如当它使用 IIFE 将属性添加到 fabric 对象时,如下所示:

(function(global) {

  var fabric  = global.fabric || (global.fabric = { }),

  // ...
  fabric.something = somethingElse
})(typeof exports !== 'undefined' ? exports : this);

通常,this 将作为对 window 的引用传递,但当脚本作为模块加载时(MDN mentions it here 以及其他地方)则不会。

这就是为什么即使您通过正确导入它也是如此

import fabric from '../node_modules/fabric/dist/fabric.js'

你会得到这样的错误

Uncaught TypeError: Cannot read property 'fabric' of undefined

除非您想亲自动手修补库源代码,否则最好在单独的非模块脚本标记中加载结构。

关于javascript - fabric js 作为 ES6 在 Chrome 中的导入不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57715326/

相关文章:

javascript - 映射返回返回递归的最后一次迭代?

javascript - 单击图像时删除标签?

javascript - lodash 将对象数组转换为单个键数组和多个值数组

javascript - 我无法在 CSS 中使 div 高度为 100% 且可滚动

javascript - 我需要使用从 Fabric JS 的特定文件夹中获取的字体

javascript - 在 Canvas 中单击形状(fabric.js 的对象)时显示自定义上下文菜单

javascript - JSON 在我的 JavaScript 中被全局修改...为什么?

javascript - 动态添加新的织物 Canvas

javascript - 导出字符串化后,fabricjs 将不会导入背景图像

javascript - 如何以编程方式选择 Fabric.js 对象