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

Question

Ich benutze webpack und babel in meiner Entwicklungswerkzeugkette; wenn Sie den folgenden Code ausführen:

import * as fabric from 'fabric'; 

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

bekomme ich folgende Fehlermeldung:

_fabric2.default.Canvas is not a constructor 

Während der gleiche Code funktioniert gut, wenn ich require('fabric'); statt import verwenden.

Ich versuchte verschiedene Möglichkeiten, import zu nennen, aber keiner von ihnen funktionierte.

Mein Linting-Tool beschwert sich über die undefinierte fabric Variable, also möchte ich es richtig definiert haben. Überraschenderweise (für mich), dieser Code nicht weder arbeiten:

var fabric = require("fabric"); 

Ich erhalte den folgenden Fehler in diesem Fall:

fabric.Canvas is not a constructor 

Was mache ich falsch?

Answer 1

In meinem aktuellen Setup fabric von NPM verwenden, verwende ich

import {fabric} from 'fabric'

auf Stoff für den Zugriff auf globales Objekt.

Answer 2

Mit Blick auf den Quellcode können Sie herausfinden, dass fabric global gemacht wird, indem Sie es auf das Fensterobjekt setzen. Sobald Sie also require oder import haben, können Sie direkt mit Stoff arbeiten. Wenn Sie möchten, dass es gut definiert ist, können Sie die Definition vom Fensterobjekt abrufen. var fabric = window['fabric']

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

Answer 3

Ihre import ist falsch. Die folgenden Werke fein:

import 'fabric' 

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