使用Typescript和Webpack的Fabric.js：画布不是构造函数

我试图在Typescript和Webpack中使用fabric.js，并将Laravel 5.4应用程序中的一些其他模块放在浏览器中正常工作。 @ types/fabric ist installed并且Typescript行为正确。新的Typescript以及Webpack我尝试了一些变种没有成功。使用Typescript和Webpack的Fabric.js：画布不是构造函数

问题

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包含织物作为键的对象，使得情况有如变体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: [ 
      { 
       test: /\.js$/, 
       loader: 'babel-loader', 
       include: [ 
        path.resolve('app/public/js'), 
        path.resolve('node_modules/countable') 
       ], 
      }, 
      { 
       test: /\.vue$/, 
       loader: 'vue-loader', 
       exclude: [ 
        path.resolve('resources/assets/ts/components') 
       ], 
       options: { 
        loaders: { 
         'scss': 'vue-style-loader!css-loader!sass-loader', 
         'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax', 
        } 
       } 
      }, 
      { 
       test: /\.tsx?$/, 
       loader: 'ts-loader', 
       exclude: /node_modules/, 
       options: { 
        appendTsSuffixTo: [/\.vue$/], 
       } 
      }, 
     ] 
    }, 
    plugins: [ 
     new webpack.ProvidePlugin({ 
      '_': 'lodash', 
      '$': 'jquery', 
      'jQuery': 'jquery', 
      'window.jQuery': 'jquery', 
     }), 
     new LiveReloadPlugin() 
    ], 
    resolve: { 
     extensions: ['.js', '.ts', '.vue', '.jsx', '.tsx', '.vuex'], 
     alias: { 
      'vue$': 'vue/dist/vue.esm.js', 
     } 
    }

的问题似乎是在的WebPack和/或巴别装载机不走织物namepace考虑。

所以问题是，是否有任何方法告诉Webpack以一种直接引用结构（或导入的类库）的方式来处理此导入，或者以Webpack的方式将其导入到Typescript中快乐？

来源

2017-09-04 colonelz

怎么样进口来自“布料”的{fabric}？ – AndreaBogazzi

是的，我试过，但只有在错误的结果： '错误TS2305：模块'“... /节点模块/ @类型/结构/索引''没有导出成员'结构'。' – colonelz

你在哪里采用fabricjs的类型定义？ – AndreaBogazzi

该解决方案谎称webpack.mix.js的配置。必须添加exports-loader才能解决问题。该follwoing规则加入：

  rules: [ 
      ... 
      { 
       test: /fabric(\.min)?\.js$/, 
       use: 'exports-loader?fabric', 
      }, 
     ]

和织物可以像变体的使用：

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

确保安装出口装载机。我发现这里的提示：https://github.com/OfficeDev/office-ui-fabric-js/issues/258

来源

2017-09-20 13:41:25 colonelz

很高兴听到您的经验 –

这为我工作：

import 'fabric' ; 
declare let fabric: any; 

var c = new fabric.Canvas('myCanvas') ;

我使用@类型/面料26年5月1日在打字稿2.5.3和3.5.1的WebPack

来源

2017-10-19 01:23:08 semiadam

使用Typescript和Webpack的Fabric.js：画布不是构造函数

回答

相关问题