वेबपैक, बेबेल: es6 आयात बनाम Fabric.js

Question

के लिए आवश्यक है मैं अपने विकास उपकरण श्रृंखला में वेबपैक और बेबेल का उपयोग कर रहा हूं; जब निम्न कोड चलाने: जबकि एक ही कोड ठीक काम करता है अगर मैं import के बजाय require('fabric'); का उपयोग

_fabric2.default.Canvas is not a constructor 

:

import * as fabric from 'fabric'; 

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

मैं निम्नलिखित त्रुटि मिलती है।

मैंने import पर कॉल करने के विभिन्न तरीकों की कोशिश की लेकिन उनमें से कोई भी काम नहीं किया।

मेरा लिफ्टिंग उपकरण अपरिभाषित fabric वैरिएबल की शिकायत करता है, इसलिए मैं इसे ठीक से परिभाषित करना चाहता हूं।

var fabric = require("fabric"); 

मैं इस मामले में निम्नलिखित त्रुटि मिलती है:

fabric.Canvas is not a constructor 

क्या मैं गलत कर रहा हूँ हैरानी की बात है (मेरे लिए), इस कोड न काम नहीं करता है?

Answer 1

मेरे वर्तमान सेटअप में NPM से fabric का उपयोग कर, मैं

import {fabric} from 'fabric'

का उपयोग कपड़े वैश्विक वस्तु के लिए उपयोग करने के लिए।

Answer 2

स्रोत कोड में देखकर आप यह पता लगा सकते हैं कि fabric इसे विंडो ऑब्जेक्ट पर व्यवस्थित करके वैश्विक बना दिया गया है। तो एक बार जब आप require या import आप सीधे कपड़े का उपयोग शुरू कर सकते हैं। यदि आप इसे अच्छी तरह से परिभाषित करना चाहते हैं तो आप विंडो ऑब्जेक्ट से परिभाषा प्राप्त कर सकते हैं। var fabric = window['fabric']

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

Answer 3

आपका import सही नहीं है। ठीक निम्नलिखित काम करता है:

import 'fabric' 

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