如何導出不帶大括號的擴展類？ （節點JS）

Question

我的目標是在不使用大括號的情況下導出名為Entrance的擴展類（假設為subclass ）。

問題是當我在subclass使用default關鍵字時，我無法訪問該subclass ，瀏覽器給我這樣的錯誤：

未捕獲的SyntaxError：重復導出了“默認”

碼：

// terminal.js
export default class Terminal {
    constructor(output) {
        this.output = output;
        console.log(`This is Terminal`);
    }
}
export default class Entrance extends Terminal {
    constructor(output) {
        super(output);
    }
    ticket() {
        console.log(`Ticket please`);
    }
}

// human.js
import Entrance from './terminal.js';
class People {
    constructor(name, input) {
        this.name = name;
        this.input = new Entrance(this);
        this.input.ticket();
    }
}
const guy = new People('james');

這種結構本來是不允許的嗎？ 還是我錯過了代碼中的某些內容？

謝謝收聽。

Answer 1

顯示該錯誤的原因是您默認導出Terminal和Entry類。

如果您只需要terminal.js中的Entrance類，請從Terminal類中刪除export default 。

Answer 2

我使您的項目適應了Node.js，因為它更易於測試。 在瀏覽器中，您仍然可以使用.js擴展名，但是您需要將文件作為模塊而不是腳本進行引用。

對於Node.js，請對ECMAScript模塊使用擴展名.mjs（“導入”和“導出”是ECMAScript模塊的功能）。 您只需要導出在外部引用的標識符：（“入口”類）。

使用'node --experimental-modules ./human.mjs'運行它

// terminal.mjs: only 'Entrance' is exported
// no need to export 'Terminal' as long as it's name is not referenced outside
class Terminal {
    constructor(output) {
        this.output = output;
        console.log(`This is Terminal`);
    }
}
export default class Entrance extends Terminal {
    constructor(output) {
        super(output);
    }
    ticket() {
        console.log(`Ticket please`);
    }
}

// human.mjs
import Entrance from './terminal.mjs';
class People {
    constructor(name, output) {
        this.name = name;
        this.input = new Entrance(this);
        this.input.ticket();
    }
}
const guy = new People('james');

如果還要在外部引用Terminal類，請不要使用“默認”導出/導入（或使用Terminal和Entrance作為成員創建頂層對象）：

// terminal2.mjs
export class Terminal {
    constructor(output) {
        this.output = output;
        console.log(`This is Terminal`);
    }
}
export class Entrance extends Terminal {
    constructor(output) {
        super(output);
    }
    ticket() {
        console.log(`Ticket please`);
    }
}

// human2.mjs: import the whole module under the alias 'term'
import * as term from './terminal2.mjs';
class People {
    constructor(name, output) {
        this.name = name;
        this.input = new term.Entrance(this);
        this.input.ticket();
        new term.Terminal(this);
    }
}

// human3.mjs: using named imports which are directly usable
import { Terminal, Entrance} from './terminal2.mjs';
class People {
    constructor(name, output) {
        this.name = name;
        this.input = new Entrance(this);
        this.input.ticket();
        new Terminal(this);
    }
}
const guy = new People('james');

現在具有默認導出，但封裝到庫對象中。 這可能是執行此操作的標准方法，但是只能將您引用的符號導出到外部：

// terminal4.mjs: using a top level object and a default export
class Terminal {
    constructor(output) {
        this.output = output;
        console.log(`This is Terminal`);
    }
}
class Entrance extends Terminal {
    constructor(output) {
        super(output);
    }
    ticket() {
        console.log(`Ticket please`);
    }
}
const myLib = {Terminal, Entrance};
export default myLib;
// or just: export default {Terminal, Entrance};'

// human4.mjs
import term from './terminal4.mjs';
class People {
    constructor(name, output) {
        this.name = name;
        this.input = new term.Entrance(this);
        this.input.ticket();
        new term.Terminal(this);
    }
}
const guy = new People('james');

參考資料：

• '導出'： https : //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/export
• '導入'： https : //developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import
• Node.js ECMAScript模塊： https : //nodejs.org/api/esm.html