2016-05-02 19 views
10

Tôi đang sử dụng webpack và babel trong chuỗi công cụ phát triển của mình; khi chạy đoạn mã sau:webpack, babel: es6 nhập khẩu so với yêu cầu đối với Fabric.js

import * as fabric from 'fabric'; 

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

tôi nhận được lỗi sau:

_fabric2.default.Canvas is not a constructor 

Trong khi cùng mã hoạt động tốt nếu tôi sử dụng require('fabric'); thay vì import.

Tôi đã thử các cách gọi khác nhau import nhưng không có cách nào trong số chúng hoạt động.

Công cụ linting của tôi phàn nàn về biến số không xác định fabric, vì vậy tôi muốn xác định nó đúng cách. Đáng ngạc nhiên (cho tôi), mã này không hoạt động không:

var fabric = require("fabric"); 

tôi nhận được lỗi sau đây trong trường hợp này:

fabric.Canvas is not a constructor 

Tôi đang làm gì sai?

Trả lời

17

Trong thiết lập hiện tại của tôi sử dụng fabric từ NPM, tôi sử dụng

import {fabric} from 'fabric'

tiếp cận với vải đối tượng toàn cầu.

4

Nhìn vào mã nguồn bạn có thể tìm ra rằng fabric được tạo thành toàn cầu bằng cách đặt nó trên đối tượng cửa sổ. Vì vậy, một khi bạn require hoặc import bạn có thể bắt đầu sử dụng vải trực tiếp. Nếu bạn muốn nó được xác định rõ, bạn có thể lấy định nghĩa từ đối tượng cửa sổ. var fabric = window['fabric']

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

+0

Vì vậy, điều đó có nghĩa fabricjs không tuân thủ quy ước của CommonJS hoặc AMD module? – mguijarr

+2

Xem câu trả lời của kcjpop, 'import {fabric} từ 'fabric';' hoạt động chính xác – hjing

1

import của bạn không đúng. Các công việc sau tốt:

import 'fabric' 

let canvas = new fabric.Canvas('c', { 
    backgroundColor: 'rgb(100,100,200)', 
    selectionColor: 'blue', 
    selectionLineWidth: 2 
});   
Các vấn đề liên quan