webpack, babel: es6 importation vs besoin pour Tissu.js

j'utilise webpack et babel dans ma chaîne d'outils de développement; lors de l'exécution du code suivant:

import * as fabric from 'fabric';

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

j'obtiens l'erreur suivante:

_fabric2.default.Canvas is not a constructor

alors que le même code fonctionne si j'utilise require('fabric'); au lieu de import.

j'ai essayé différentes manières d'appel de import mais aucun n'a fonctionné.

mon outil de linting se plaint de l'indéfini fabric variable, donc j'aimerais qu'elle soit correctement définie. Étonnamment (pour moi), ce code ne fonctionne pas ni:

var fabric = require("fabric");

j'obtiens l'erreur suivante dans ce cas:

fabric.Canvas is not a constructor

Qu'est-ce que je fais de mal ?

10
demandé sur d4nyll 2016-05-02 17:22:31

3 réponses

dans ma configuration actuelle en utilisant fabric à partir de MNP, j'utilise

import {fabric} from 'fabric'

pour accéder à l'objet global de tissu.

22
répondu kcjpop 2016-09-20 12:20:40

en Regardant dans le code source, vous pouvez comprendre que fabric est rendu global en le réglant sur l'objet window. Donc, une fois que vous require ou import vous pouvez commencer à utiliser le tissu directement. Si vous voulez qu'il soit bien défini, vous pouvez obtenir la définition de l'objet window. var fabric = window['fabric']

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

4
répondu raiyan 2016-05-02 17:14:20

import est incorrect. Le suivant fonctionne très bien:

import 'fabric'

let canvas = new fabric.Canvas('c', {
  backgroundColor: 'rgb(100,100,200)',
  selectionColor: 'blue',
  selectionLineWidth: 2
});           
2
répondu love2node 2016-06-24 12:00:02