Fabric.js 与 Typescript 和 Webpack：Canvas 不是构造函数答案

【问题标题】：Fabric.js with Typescript and Webpack: Canvas is not a constructorFabric.js 与 Typescript 和 Webpack：Canvas 不是构造函数
【发布时间】：2018-02-12 10:40:24
【问题描述】：

我正在尝试将fabric.js 与Typescript 和Webpack 一起使用，而Laravel 5.4 应用程序中的一些其他模块在浏览器中运行良好。 @types/fabric 已安装并且 Typescript 行为正确。 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，这是一个以织物为键的对象。

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 和/或 babel-loader 没有考虑结构命名空间。

所以问题是，是否有任何方法可以告诉 Webpack 以直接引用结构（或此类导入库）的方式处理此导入，或者以 Webpack 也很高兴的方式将其导入 Typescript ?

【问题讨论】：

从 'fabric' 导入 { fabric } 怎么样？
是的，我试过了，但这只会导致错误：error TS2305: Module '".../node_modules/@types/fabric/index"' has no exported member 'fabric'.
你在哪里得到了 fabricjs 的类型定义？
我使用了@types/fabric 中的一个，通过npm 安装了它们，并将它们放在node_modules/@types/fabric 下的文件夹中。
我有完全相同的问题，我将它与使用 create-react-app 设置的 react 应用程序一起使用。关于如何在不修改 webpack 的情况下解决相同问题的任何想法。

标签： javascript typescript webpack fabricjs babeljs

【解决方案1】：

这对我有用：

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

【讨论】：

【解决方案2】：

解决方案在于 webpack.mix.js 的配置。必须为 fabric 添加exports-loader 来解决问题。添加了以下规则：

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

fabric 可以像变体 a 一样使用：

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

确保已安装 export-loader。我在这里找到了提示：https://github.com/OfficeDev/office-ui-fabric-js/issues/258

【讨论】：

很高兴听到您的经历