使用继承时的BabelJS类排序

Question

我正在尝试找到一种方法，让babel以特定的顺序加载文件，这样超类就会先于子类加载。

给出以下文件的示例：

src/fruit.js：

export class Fruit{
    constructor(color){
        this._color = color;
    }
}

src/apple.js：

export class Apple extends Fruit{
    constructor(){
        super("green");
    }
}

src/xecute.js：

var theApple = new Apple();

package.json

{
  "name": "fruit",
  "version": "1.0.0",
  "description": "Fruit JS",
  "scripts": {
    "build": "babel src -o out/fruit-bundle.js"
  },
  "author": "Toby Nilsen",
  "license": "MIT",
  "devDependencies": {
    "babel-cli": "^6.22.2",
    "babel-preset-es2015": "^6.5.0"
  }
}

.babelrc：

{
  "presets": ["es2015"]
}

当我编译我的文件时，下面的命令

npm run build

并使用以下命令运行我的out/fruit-bundle.js：

node out\fruit-bundle.js

我得到了以下错误：

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

这是因为babel在解析fruit.js之前解析了apple.js。我可以通过将我的文件重命名为0_fruit.js和1_apple.js来解决这个问题，但我想知道是否有任何方法可以让babel解决依赖关系并对输出进行排序，以便首先加载超类？

Answer 1

巴别塔只是个转译器。它只是转换语法，但不会为你做捆绑。您将需要一个绑定器来以正确的顺序解析依赖项。考虑查看Rollup或Webpack。使用Rollup，无需缓存和其他构建优化的最简单方法是：

• 运行汇总以将所有内容捆绑到一个文件中，然后对汇总的输出运行Babel。
• 对所有文件运行Babel，然后使用汇总将它们全部捆绑。

另外，为了让捆绑器知道正确的顺序，可以从Apple导入Fruit。

import Fruit from 'fruit';

export class Apple extends Fruit{
    constructor(){
        super("green");
    }
}