Gulp BabelJs compile issue wrong order

Question

I am facing an issue related to compiling ES6 scripts by using gulp babel. My project consists of maybe 40 - 50 different ES6 files (one class per file). At the moment, the compile process relies on a maintained ordered list of these .js files to guarantee a correct compilation and output order.

In the very past I tried to let the babel plugin compile these files in its own order. Unfortunately the result were runtime errors due to missing declared classes (affected by wrong compilation order).

My question is now: Is there any way to guarantee the correct compilation order automatically instead of manually maintaining this list?
If not, is there any ES6 compiler which does guarantee a correct compilation order automatically?

Thank you and best regards

Answer 1

I think the issue is, that babel doesn't resolve your dependencies.

For example:

// ComponentA.js
import AbstractComponent from './AbstractComponent';
class ComponentA extends AbstractComponent { ... }

// AbstractComponent.js
class AbstractComponent { ... }
export default AbstractComponent;

// gulpfile.js
gulp.task('js', function () {
return gulp.src(['./resources/javascript/ComponentA.js'])
    .pipe(concat('app.js'))
    .pipe(babel({ presets: ['@babel/env']}))
    .pipe(gulp.dest('./public/js'));
});

Issue here is, that babel can't find it's parent class, because it's not defined before ComponentA Class. I've same issue and no solution for that.

Eg React you are able to import from classes and compile them to es5 and everything is fine...