使用Typescript和Webpack的Fabric.js:Canvas不是构造函数 [英] Fabric.js with Typescript and Webpack: Canvas is not a constructor
问题描述
我正在尝试将除了Typescript和Webpack的fabric.js放在Laravel 5.4应用程序中的一些其他模块中,这些模块在浏览器中运行良好。 @ types / fabric ist已安装且Typescript行为正确。打字稿和Webpack的新手我尝试了一些变种没有成功。
I'm trying to use fabric.js with Typescript and Webpack aside some other modules in a Laravel 5.4 application that work fine in the browser. @types/fabric ist installed and Typescript behaves correct. New to Typescript as well as Webpack i tried some variants with no success.
问题
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,这是一个以面料为关键字的对象。
WEBPACK_IMPORTED_MODULE_1_fabric__default requires WEBPACK_IMPORTED_MODULE_1_fabric which is an object with fabric as key.
const canvas = new fabric.fabric.Canvas('my-canvas');
适用于Webpack,但不符合类型检查。
would be working for Webpack but is not conform to type inspections.
变体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类似。
WEBPACK_IMPORTED_MODULE_1_fabric contains an object with fabric as key so that the situation is like with variant 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和/或babel-loader中没有考虑结构名称空间。
The problem seem to be in Webpack and/or the babel-loader doesn't take the fabric namepace into account.
所以问题是是否有任何方法告诉Webpack处理这个导入以某种方式它直接引用fabric(或那种导入的库)或者以一种Webpack很高兴的方式将它导入到Typescript中?
So the question is if there is any method to tell Webpack to handle this import in a way that it directly references fabric (or an imported library of that kind) or to import it into Typescript in a way that also Webpack is happy?
推荐答案
这对我有用:
import 'fabric' ;
declare let fabric: any;
var c = new fabric.Canvas('myCanvas') ;
我在TypeScript 2.5.3和webpack 3.5.1上使用@ types / fabric 1.5.26
I'm using @types/fabric 1.5.26 on TypeScript 2.5.3 and webpack 3.5.1
这篇关于使用Typescript和Webpack的Fabric.js:Canvas不是构造函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!