在 Chrome 中，fabric js 作为 ES6 导入不起作用答案

【问题标题】：fabric js as ES6 import in Chrome doesn't work在 Chrome 中，fabric js 作为 ES6 导入不起作用
【发布时间】：2020-01-03 00:49:30
【问题描述】：

在我的网站上，我不想捆绑，而是直接使用 ES6 模块（适用于观众）

我尝试通过

导入fabric.js

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

但是当我启动网站时，我得到了

"未捕获的语法错误：请求的模块 '../node_modules/fabric/dist/fabric.js' 不提供导出命名为“面料””

如果我将以上内容更改为 import * as FAB from "../node_modules/fabric/dist/fabric.js"; 我明白了

未捕获的类型错误：无法读取未定义的属性“结构” 在 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

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

还是一样的错误

未捕获的语法错误：请求的模块 '../node_modules/fabric/dist/fabric.min.js' 不提供导出命名为“默认”

【问题讨论】：

标签： javascript fabricjs

【解决方案1】：

以这种方式导入对我有用

 import { fabric } from "fabric"

【讨论】：

【解决方案2】：

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

除非您想亲自动手并修补库源，否则最好将结构加载到单独的非模块脚本标记中。

【讨论】：

我想知道是否有办法让双向工作。 commonJs ans es 模块。

【解决方案3】：

请尝试如下导入，

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


class App extends Component {

  render() {
    console.log(fabric) // you can get fabric object
    return (
      <div class="blahblah"> 
      </div>
    )

  }
}

【讨论】：

仍然得到未捕获的语法错误：请求的模块 '../node_modules/fabric/dist/fabric.min.js' 没有提供名为 'default' 的导出。对你起作用吗？您使用哪种面料版本？我在 3.3.2
是的，它对我有用。我的是 create-react-app，我使用的是 fabric 3.4.0，我的包是 fabric，你可以像“npm i fabric”一样安装
尝试将您的结构升级到 3.4.0 并查看.. 我的工作正常。
试过了。不幸的是没有不同的结果。这真的很荒谬，因为代码是如此简单，我什至从 JS 文件中删除了所有其他内容。有什么想法吗？
您遇到同样的问题？我的意思是messag6