Question

我在我的开发工具链中使用webpack和babel;运行以下代码时：

import * as fabric from 'fabric';

var canvas = new fabric.Canvas('canvas');

我收到以下错误：

_fabric2.default.Canvas is not a constructor

如果我使用require('fabric');代替，则相同的代码可以正常工作 import。

我尝试了不同的方式来调用import，但没有一种方法可以工作。

我的linting工具抱怨未定义的fabric变量，所以我想正确定义它。令人惊讶的是（对我而言），这段代码不起作用：

var fabric = require("fabric");

在这种情况下我收到以下错误：

fabric.Canvas is not a constructor

我做错了什么？

Answer 1

在我目前使用NPM fabric的设置中，我使用

import {fabric} from 'fabric'

访问fabric全局对象。

Answer 2

查看源代码，您可以通过在窗口对象上设置来确定fabric是全局的。因此，一旦require或import，您就可以直接开始使用结构了。如果您希望它被很好地定义，您可以从window对象中获取定义。 var fabric = window['fabric']

Answer 3

您的import不正确。以下工作正常：

import 'fabric'

let canvas = new fabric.Canvas('c', {
  backgroundColor: 'rgb(100,100,200)',
  selectionColor: 'blue',
  selectionLineWidth: 2
});