导入导出默认 class 的节点模块会导致 'module' 而不是 'constructor'

Question

我正在尝试导入节点模块 React-Signature-Pad。 index.js 文件如下所示：

import PropTypes from 'prop-types'
import React, { Component } from 'react'
import trimCanvas from 'trim-canvas'

import Bezier from './bezier.js'
import Point from './point.js'

export default class SignatureCanvas extends Component {
  static propTypes = {
    velocityFilterWeight: PropTypes.number,
    minWidth: PropTypes.number,
    maxWidth: PropTypes.number,
    dotSize: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
    penColor: PropTypes.string,
    onEnd: PropTypes.func,
    onBegin: PropTypes.func,
    canvasProps: PropTypes.object
  }

  static defaultProps = {
    velocityFilterWeight: 0.7,
    minWidth: 0.5,
    maxWidth: 2.5,
    dotSize: () => {
      return (this.props.minWidth + this.props.maxWidth) / 2
    },
    penColor: 'black',
    backgroundColor: 'rgba(0,0,0,0)',
    onEnd: () => {},
    onBegin: () => {}
  }

  componentDidMount () {
    this._ctx = this._canvas.getContext("2d");
    //.....

我正在尝试这样使用它：import * as SignatureCanvas from 'react-signature-canvas'

然而，SignatureCanvas 评估为具有 'default' 的单个属性的对象。所以当我使用时出现错误，因为 SignatureCanvas 实际上不是构造函数。

我能够让它工作的唯一方法是像这样导入它：

declare var require: any;
var SignatureCanvas = require('react-signature-canvas').default;

这似乎不对。哪种导入方式正确？

如果重要的话，我正在使用 WebPack2 来打包网站。

Answer 1

您必须像导入它一样导入它，因为该模块有一个默认的导出成员：

import SignatureCanvas from 'react-signature-canvas'

默认导出只是一个名为 default 的命名导出。所以你甚至可以这样做：

import { default as SignatureCanvas } from 'react-signature-canvas'

或：

import * as SignatureCanvas from 'react-signature-canvas'

//... and use the `SignatureCanvas` class by accessing the `default property`
new SignatureCanvas.default()

查看有关默认导出的文档：https://www.typescriptlang.org/docs/handbook/modules.html#default-exports

Answer 2

导入此模块并使其作为 class 工作的方法是：

import SignatureCanvas from 'react-signature-canvas';

var x = new SignatureCanvas(...);

import * as xxx from 'xxx' 语法与您发现的完全一样：模块 xxx 的默认导出工件设置为 xxx.default。在您的情况下，您必须这样做：

import * as SignatureCanvas from 'react-signature-canvas';

var x = new SignatureCanvas.default(...); // now x is the same as above

导入导出默认 class 的节点模块会导致 'module' 而不是 'constructor'

Importing node module what exports default class results in a 'module' not a 'constructor'

javascript

typescript

ecmascript-6

webpack

es6-modules