Saturday, 18 March 2017

BabelJS class ordering when using inheritance

I am trying to find a way to make babel load files in a particular order so that superclasses are loaded before childclasses.

An example given the following files:

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"]
}

When I compile my files the following command

npm run build

And run my out/fruit-bundle.js with:

node out\fruit-bundle.js

I get the follwing error:

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

This is because babel parses apple.js before fruit.js. I can work around the problem by renaming my files to 0_fruit.js and 1_apple.js, but I would like to know if there is any way for babel to resolve the dependencies and order the output so that superclasses are loaded first?



via Toby

No comments:

Post a Comment