BabelJS class ordering when using inheritance

Question

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?

"*is any way for babel to resolve the dependencies*" - it already does that automatically. Your problem is that you forgot to **declare the dependency** in `apple.js` - you need to `import { Fruit } from './fruit.js'`! — Bergi, Mar 18 '17 at 21:28

Joseph · Answer 1 · 2017-03-18T19:46:54.837

1

Babel is just a transpiler. It just transpiles the syntax, but it does not do bundling for you. You'll need a bundler to resolve dependencies in the correct order. Consider checking out Rollup or Webpack. Going with Rollup, the simplest way to do this without the caching and other build optimizations is either to:

Run Rollup to bundle everything to one file then run Babel on Rollup's output.
Run Babel on all files, then use Rollup to bundle them all.

Also, so that the bundler knows the right order, import Fruit from Apple.

import Fruit from 'fruit';

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

edited Mar 18 '17 at 19:46

answered Mar 18 '17 at 16:55

Joseph

117,725
30
181
234

Thanks for answering. :) But as you can see from the example, babel has allready bundled the files into a fruit-bundle.js (ES5). Even if I used another bundler after that, say webpack, the content inside the existing bundle wouldn't be rearranged and the problem will persist, even if I try to use import statements. – Toby Mar 18 '17 at 17:01
"*Even if I used another bundler after that, say webpack, the content inside the existing bundle wouldn't be rearranged*" - That is not correct. But as the answer says, babel just transpiles the code, and if your output is one file it just puts them together. You should specify an output directory not a single file and use imports (the import statements won't be changed, but the directory structure remains the same). – Michael Jungo Mar 18 '17 at 18:26

BabelJS class ordering when using inheritance

1 Answers1