使用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：畫布不是構造函數

回答

相關問題