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 ?
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.
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
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
});