Babel 中的继承转译为 ES2015 由于没有类提升而不起作用

Question

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

我最近在一个文件中创建了一个基类，然后尝试在不同的文件中的不同类中扩展它。我很快意识到的是，类定义没有被提升，当 Babel 组合多个文件时，顺序是这样的，当我实例化继承的类时，基类还没有定义（所以它会抛出运行时错误）。

这是一个一般的例子，说明了我在说什么：

基.js：

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

派生.js：

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

主.js：

var instance = new Derived();

通天塔：

babel src --out-file index.js

索引中的结果.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

确保导入和导出文件。这样，babel 就不必在文件连接期间依赖文件加载顺序。

例：

基地.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;

主.js

import Derived from './derived.js'
var instance = new Derived();