webpack、babel：es6 import 与 Fabric.js 的 require

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 但其中 none 有效。

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

var fabric = require("fabric");

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

fabric.Canvas is not a constructor

我做错了什么？

Answer 1

查看源代码，您可以发现 fabric 是通过在 window 对象上设置它而成为全局的。所以一旦你 require 或 import 你就可以直接开始使用 fabric 了。如果你希望它被很好地定义，你可以从 window 对象中获取定义。 var fabric = window['fabric']

https://github.com/kangax/fabric.js/blob/master/dist/fabric.js

Answer 2

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

import 'fabric'

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

Answer 3

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

import {fabric} from 'fabric'

访问 fabric 全局对象。

webpack、babel：es6 import 与 Fabric.js 的 require

webpack, babel: es6 import vs. require for Fabric.js

fabricjs

webpack

babeljs