小编col*_*elz的帖子

我正在尝试将Fabric.js与Typescript和Webpack一起使用在Laravel 5.4应用程序中的一些其他模块,这些模块在浏览器中运行良好.@ types/fabric ist已安装且Typescript行为正确.打字稿和Webpack的新手我尝试了一些变种没有成功.

问题

result.js:198 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_1_fabric___default.a.Canvas is not a constructor

变式A.

code.ts

import fabric from "fabric";
const canvas = new fabric.Canvas('my-canvas');

result.js

var canvas = new __WEBPACK_IMPORTED_MODULE_1_fabric__default.a.Canvas('my-canvas');

WEBPACK_IMPORTED_MODULE_1_fabric__default需要WEBPACK_IMPORTED_MODULE_1_fabric,这是一个以fabric作为键的对象.

const canvas = new fabric.fabric.Canvas('my-canvas');

将适用于Webpack但不符合类型检查.

变体B

code.ts

import * as fabric from "fabric";
const canvas = new fabric.Canvas('my-canvas');

result.js

var canvas = new __WEBPACK_IMPORTED_MODULE_1_fabric__["Canvas"]('my-canvas');

WEBPACK_IMPORTED_MODULE_1_fabric包含一个带有fabric作为键的对象,因此情况与变体A类似.

变体C.

code.ts

import {Canvas} from "fabric";
const canvas = new Canvas('my-canvas');

result.js

var canvas = new __WEBPACK_IMPORTED_MODULE_1_fabric__["Canvas"]('my-canvas');

最后它与变体B相同.

webpack.mix.js的摘录

   .webpackConfig({
    module: {
        rules: …