web-dev-qa-db-ja.com

TypeError：スーパー式はnullまたは関数である必要があり、Babeljsでは未定義ではありません

現在、node.JSとBabelを使用して、ES6で複数ファイルを継承しようとしています（コードをES6からES5に変換するためにBabelを使用しています 'cause Node do n't not ES6現在）。インポート/エクスポートを使用して、さまざまなファイルを「リンク」しています。

実際に私は持っています：親クラス（ファイル1）

export class Point
{
    constructor(x, y)
    {
        this.x = x;
        this.y = y;
    }

    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }
}

そして：子クラス（ファイル2）

import Point from './pointES5'

export class ColorPoint extends Point
{
    constructor(x, y, color)
    {
        super(x, y);
        this.color = color;
    }

    toString() {
        return super.toString() + ' in ' + this.color;
    }
}

そしてメインメイン（ファイル3）

import Point from './pointES5'
import ColorPoint from './colorpointES5'

var m_point = new Point();
var m_colorpoint = new ColorPoint();

console.log(m_point.toString());
console.log(m_colorpoint.toString());

親と子からのtoString（）メソッド呼び出しをテストすることはできません。
そこで、Babelを使用してコードをES6からES5に変換し、各パーツを個別に実行して、問題ないかどうかをテストします。
-ポイント（親）は良好であり、エラーなしで実行されます。
-ColorPoint（子）は完全には実行されず、スローされます。

TypeError：スーパー式は、nullまたは未定義ではない関数でなければなりません

StackTraceの最初の行は次のとおりです。

function _inherits（subClass、superClass）{if（typeof superClass！== 'function' && superClass！== null）{throw new TypeError（ 'Super expression must be null or not a not not not' + typeof superClass）; } subClass.prototype = Object.create（superClass && superClass.prototype、{constructor：{value：subClass、enumerable：false、writable：true、configurable：true}}）; if（superClass）Object.setPrototypeOf？ Object.setPrototypeOf（subClass、superClass）：subClass .proto = superClass; }（ES5に変換されたコード（Babelified）に由来し、必要に応じて完全に投稿できます）。

このコードは非常に単純なため、イライラさせられます...しかし、エラーの原因はわかりません。

Babelの異なるバージョン（5、5.8、6）を試しますが、違いはありません...

私は何を間違えましたか？

PS：言うのを忘れていました。たった1つのファイルでそれを行うと、完全に機能します。しかし、ファイルごとに1つのクラスのみを持つことは私にとって本当に重要です...

javascriptnode.jsinheritancebabeljs
16
Aethyn

エクスポートがインポートと一致しません：

export class Point
// and
import Point from './pointES5'

名前付きシンボルをエクスポートしているがデフォルトをインポートしているため、2番目のファイルでPointとして間違ったオブジェクトを取得することになります。

次のいずれかを使用できます。

export default class Point

最初のクラスファイルまたは

import {Point} from './pointES5';

2番目のファイルで正しい参照を取得します。ファイルごとに単一クラスのレイアウトを使用する場合は、前者をお勧めします。通常、エクスポートされるクラスは1つだけなので、それをデフォルトとして使用するのが理にかなっています。

あなたが今持っているものは次のものと同等です：

// in Point
module.exports = {
  Point: Point
};

// in ColorPoint
var Point = require('./pointES5'); // will point to *the whole object*

class SubPoint extends Point
42
ssube

Webpackをバンドラーとして使用している場合、webpackの設定に問題がある可能性もあります。または、コードをどのようにu化するか。たとえば、NPMパッケージreact-draft-wysiwygとwepbackプラグインuglifyjs-の特定の問題をどのように解決したかwebpack-plugin。

ここでうまくいったのは、uglifyOptionsのデフォルトでtrueであるため、compressオプションのinlineオプションをfalseに設定することでした。

optimization:{
  minimizer: [new UglifyJsPlugin({
  uglifyOptions: {
    compress: {
      inline: 1, // this right here
      // keep_fnames: true
    },
    mangle: {
      // keep_fnames: true
    }
  }
})]
}
1
Teebo