javascript - 由于没有类提升，Babel 转译 ES2015 中的继承无法工作

Question

我正在开发一个网络应用程序，并将我的 Javascript 分成多个文件。我正在使用 Babel 将 ES2015 源文件目录转换为单个 ES5 文件。来自面向对象的背景，我喜欢拥有“类”，无论它们是否只是语法糖。

我最近在一个文件中创建了一个基类，然后尝试在不同文件的不同类中扩展它。我很快意识到，类定义没有被提升，并且当 Babel 组合多个文件时，顺序是这样的:当我实例化继承的类时，基类尚未定义(因此它会引发运行时错误)。

这是一个说明我正在谈论的内容的一般示例:

base.js:

class Base {
    constructor() {
        console.log("BASE");
    }
}

派生.js:

class Derived extends Base {
    constructor() {
        super();
        console.log("DERIVED");
    }
}

main.js:

var instance = new Derived();

Babel-CLI:

babel src --out-file index.js

index.js 的结果如下:

class Base {
    constructor() {
        console.log("BASE");
    }
}
class Derived extends Base {
    constructor() {
        super();
        console.log("DERIVED");
    }
}
var instance = new Derived();

这很好用。但是，如果我将 base.js 的文件名更改为 xbase.js，那么 index.js 最终看起来像这样:

class Derived extends Base {
    constructor() {
        super();
        console.log("DERIVED");
    }
}
var instance = new Derived();
class Base {
    constructor() {
        console.log("BASE");
    }
}

这会失败，因为基类在使用之前没有定义:

index.js:1 Uncaught ReferenceError: Base is not defined

很明显，当 Babel 连接文件时，它会按字母顺序抓取文件名并以这种方式将它们粘在一起。如何在不确保我的文件名按照我希望它们在最终文件中出现的顺序命名的情况下完成这项工作？使用模块可以解决这个问题吗？这是解决这个问题的唯一方法吗？

Answer 1

确保import和 export你的文件。这样，babel 在文件连接期间就不必依赖文件加载顺序。

示例:

base.js

class Base {
    constructor() {
        console.log("BASE");
    }
}

export default Base;

派生.js

import Base from './base.js';

class Derived extends Base {
    constructor() {
        super();
        console.log("DERIVED");
    }
}

export default Derived;

main.js

import Derived from './derived.js'

var instance = new Derived();