2016-03-03 20 views
6

Attualmente sto cercando di rendere l'ereditarietà di più file in ES6, con node.JS e Babel (sto usando Babel per convertire il codice da ES6 per ES5 'perché il nodo non implementa ES6 in questo momento). Sto usando import/export per "collegare" i file differenti.TypeError: Super expression deve essere nullo o una funzione, non indefinito con Babeljs

realtà ho: Parent Classe (File 1)

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

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

E: Bambino Classe (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; 
    } 
} 

E il principale principale (File 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()); 

Lo sto facendo per testare le chiamate dei metodi toString(), da Parent e da Child.
Quindi uso Babel per convertire il codice da ES6 a ES5 e eseguo separatamente ciascuna parte per verificare se è ok o meno.
- Punto (il genitore) è buono e viene eseguito senza errori.
- ColorPoint (il Bambino) non vengono eseguiti completamente e buttare:

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

La prima riga del StackTrace è:

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).

E 'frustrante causa di questo codice è molto semplice ... Ma non vedo cosa stia causando l'errore.

provo differenti versioni di Babel (5, 5.8, 6), ma non v'è nessuna differenza ...

Che cosa ho fatto di sbagliato?

PS: Ho dimenticato di dire: FUNZIONA PERFETTAMENTE quando lo faccio in un solo file. Ma è molto importante per me avere una sola classe per file ...

risposta

24

l'esportazione non corrispondono alla vostra:

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

si esporta un simbolo di nome, ma l'importazione del difetto, in modo da otterrò l'oggetto sbagliato come Point nel tuo secondo file.

è possibile utilizzare:

export default class Point 

nel file di prima classe o

import {Point} from './pointES5'; 

nel secondo file per andare a prendere il riferimento giusto. Se stai andando per il layout di una singola classe per file, suggerirei il primo. Solitamente viene esportata una sola classe, quindi è logico impostarla come predefinita.

Quello che abbiamo ora è l'equivalente di:

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

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

class SubPoint extends Point 
+0

Wow accidenti!Capisco un po 'di più cosa sia la parola chiave "predefinita" e per quello che viene usata ora! Grazie mille per il vostro aiuto ! Funziona perfettamente! : D – Aethyn

+0

Nel caso in cui si utilizzi Webpack per il raggruppamento, si consiglia di utilizzare il secondo approccio suggerito da @ssube che sfrutta l'agitazione dell'albero 2.0 del Webpack a fini di prestazioni: http://2ality.com/2015/12/webpack -tree-shaking.html –

Problemi correlati