使用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中快乐?
该解决方案谎称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
很高兴听到您的经验 –
这为我工作:
import 'fabric' ;
declare let fabric: any;
var c = new fabric.Canvas('myCanvas') ;
我使用@类型/面料26年5月1日在打字稿2.5.3和3.5.1的WebPack
怎么样进口来自“布料”的{fabric}? – AndreaBogazzi
是的,我试过,但只有在错误的结果: '错误TS2305:模块'“... /节点模块/ @类型/结构/索引''没有导出成员'结构'。' – colonelz
你在哪里采用fabricjs的类型定义? – AndreaBogazzi