webpack, babel: es6 importa vs. require per Fabric.js

Question

Sto usando webpack e babel nella mia catena di strumenti di sviluppo; quando si esegue il seguente codice:

import * as fabric from 'fabric'; 

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

ottengo il seguente errore:

_fabric2.default.Canvas is not a constructor 

considerando che la stessa codice funziona bene se uso require('fabric'); invece di import.

Ho provato diversi modi di chiamare import ma nessuno di loro ha funzionato.

Il mio strumento di linting si lamenta della variabile non definita fabric, quindi mi piacerebbe averla definita correttamente. Sorprendentemente (per me), questo codice non funziona né:

var fabric = require("fabric"); 

ottengo il seguente errore in questo caso:

fabric.Canvas is not a constructor 

Che cosa sto facendo di sbagliato?

Answer 1

Nella mia configurazione attuale utilizzando fabric da NPM, io uso

import {fabric} from 'fabric'

per accedere al tessuto oggetto globale.

Answer 2

Guardando nel codice sorgente è possibile capire che fabric è globale impostandolo sull'oggetto della finestra. Quindi, una volta che hai require o import puoi iniziare a utilizzare direttamente il tessuto. Se vuoi che sia ben definito puoi ottenere la definizione dall'oggetto window. var fabric = window['fabric']

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

Answer 3

tuo import non è corretto. Le seguenti opere di bene:

import 'fabric' 

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