在我的网站上,我不想捆绑而是直接使用 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/