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

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, но никто из них не работал.

Мой инструмент для перевязки жалуется на неопределенную переменную fabric, поэтому я хотел бы, чтобы она была правильно определена. Удивительно (для меня), этот код не работает ни:

var fabric = require("fabric"); 

Я получаю следующее сообщение об ошибке в этом случае:

fabric.Canvas is not a constructor 

Что я делаю неправильно?

Answer 1

В моей текущей настройке с использованием fabric от НОГО, я использую

import {fabric} from 'fabric'

доступ к ткани глобальному объекту.

Answer 2

Заглянув в исходный код, вы можете понять, что fabric делается глобальным, устанавливая его на объект окна. Поэтому, как только вы require или import, вы можете начать использовать ткань напрямую. Если вы хотите, чтобы он был четко определен, вы можете получить определение из окна. var fabric = window['fabric']

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

Answer 3

Ваш import неверен. Следующее работает отлично:

import 'fabric' 

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