Question

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

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

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

base.js：

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

derived.js：

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

main.js：

var instance = new Derived();

巴别-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");
    }
}

这会失败，因为在使用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;

derived.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();

Babel的遗产由于没有上课而导致ES2015无法正常工作

1 个答案: