2016-03-03 55 views
6

我目前正在嘗試在ES6中使用node.JS和Babel進行多文件繼承(我使用Babel將ES6中的代碼到ES5'原因Node現在不執行ES6)。 我正在使用導入/導出來「鏈接」不同文件。TypeError:超級表達式必須爲null或函數,而不是用Babeljs未定義

其實我有: 父類(附件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,並分別運行每個部分以測試它是否正常。
- 點(父)是好的,並執行沒有錯誤。
- 重點色(兒童)不完全運行,並拋出:

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

堆棧跟蹤的第一行是:

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

這是令人沮喪的原因這個代碼很簡單... 但我不明白是什麼導致了錯誤。

我嘗試通天型動物的版本(5,5.8,6),但有沒有差異?

我做了什麼錯? PS:我忘了告訴它:它在我只在一個文件中這樣做時非常有效。但只生一個的文件類...這對我真的很重要

回答

24

您的出口不符合您的導入:

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

要導出一個名爲象徵,而是導入默認的,所以在第二個文件中會出現Point錯誤的對象。

您可以使用:

export default class Point 
第一類文件

import {Point} from './pointES5'; 
在第二個文件

來獲取正確的參考。如果你打算採用單文件每文件格式,我會建議前者。您通常只會導出一個類,因此將其作爲默認值纔有意義。

你現在有什麼是等價的:

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

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

class SubPoint extends Point 
+0

哇該死!我更瞭解「默認」關鍵字以及它現在的用途!非常感謝你的幫助 ! 它完美的作品! :D – Aethyn

+0

如果您正在使用webpack進行捆綁,我建議使用@ssube建議的第二種方法,該方法可以利用webpack的2.0樹抖動來實現性能:http://2ality.com/2015/12/webpack - 樹 - shaking.html –

相關問題