Webpack, babel: импорт es6 по сравнению с требованием для Fabric.js

Я использую 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 жалуется на переменную undefined fabric, поэтому я хотел бы, чтобы она была правильно определена. Удивительно (для меня), этот код тоже не работает:

var fabric = require("fabric");

В этом случае я получаю следующую ошибку:

fabric.Canvas is not a constructor

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

Ответы

Ответ 1

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

import {fabric} from 'fabric'

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

Ответ 2

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

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

Ответ 3

Ваш import неверен. Следующее прекрасно работает:

import 'fabric'

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