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

Babel只是一个转录器。它只是转换语法，但它不会为你捆绑。您需要一个捆绑器以正确的顺序解决依赖关系。考虑结帐Rollup或Webpack。使用Rollup，没有缓存和其他构建优化的最简单方法是：

运行Rollup将所有内容捆绑到一个文件，然后在Rollup的输出上运行Babel。
在所有文件上运行Babel，然后使用Rollup将它们全部捆绑。

此外，为了让捆绑商知道正确的顺序，请从Fruit导入Apple。

import Fruit from 'fruit';

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

使用继承时BabelJS类的排序

1 个答案: