2016-03-03 21 views
6

Ich versuche derzeit, mehrere Dateien Vererbung in ES6 machen, mit node.JS und Babel (Ich benutze Babel, um den Code von ES6 zu konvertieren zu ES5, weil Node ES6 nicht sofort implementiert. Ich verwende Import/Export, um die verschiedenen Dateien zu verknüpfen.TypeError: Super-Ausdruck muss null sein oder eine Funktion, nicht undefined mit Babeljs

Eigentlich habe ich: Geordnete Klasse (File 1)

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

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

Und: Child-Klasse (File 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; 
    } 
} 

Und die Haupt Main (Datei 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()); 

Ich mache das, um die toString() -Methoden Aufrufe von Parent und von Child zu testen.
Also dann benutze ich Babel, um den Code von ES6 zu ES5 zu konvertieren, und ich führe jeden Teil einzeln aus, um zu testen, ob es in Ordnung ist oder nicht.
- Point (das Parent) ist gut und wird ohne Fehler ausgeführt.
- Colorpoint (das Kind) nicht vollständig laufen und werfen:

TypeError: Super expression must either be null or a function, not undefined

Die erste Zeile des Stacktrace ist:

function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, 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; } (It comes from the ES5 converted code (Babelified), and I can post it entirely if it's needed).

Es ist frustrierend, weil dieser Code ist sehr einfach ... Aber ich sehe nicht, was den Fehler verursacht.

Ich versuche differents Versionen von Babel (5, 5.8, 6), aber es gibt keine Unterschiede ...

Was habe ich falsch gemacht?

PS: Ich habe vergessen zu sagen: es funktioniert PERFEKT, wenn ich das in nur einer Datei mache. Aber es ist wirklich wichtig für mich nur eine Klasse zu haben, indem Datei ...

Antwort

24

Ihr Export nicht Ihren Import:

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

Sie ein benanntes Symbol zu exportieren, aber die Standard-Import, so dass Sie In Ihrer zweiten Datei wird das falsche Objekt als Point angezeigt.

Sie können entweder:

export default class Point 

in der ersten Klasse Datei oder

import {Point} from './pointES5'; 

in der zweiten Datei die richtige Referenz zu holen. Wenn Sie das Layout für einzelne Klassen pro Datei verwenden möchten, würde ich das erste empfehlen. In der Regel wird nur eine einzelne Klasse exportiert, daher ist es sinnvoll, diese als Standard zu verwenden.

Was Sie jetzt haben, ist das Äquivalent von:

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

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

class SubPoint extends Point 
+0

Wow damn!Ich verstehe ein bisschen mehr, was das "Standard" -Schlüsselwort ist und für was es jetzt benutzt wird! Vielen Dank für deine Hilfe ! Es funktioniert perfekt! : D – Aethyn

+0

Für den Fall, dass Sie das Webpack zum Bündeln verwenden, empfehle ich den zweiten Ansatz, der von @ssube vorgeschlagen wurde, der die Vorteile von webpacks 2.0 tree shaking für Leistungszwecke nutzen würde: http://2ality.com/2015/12/webpack -Baumschütteln.html –

Verwandte Themen