咕嘟咕嘟BabelJs编译的问题错误的顺序

Question

我面临与使用gulp babel编译ES6脚本有关的问题。 我的项目可能包含40-50个不同的ES6文件（每个文件一个class ）。 目前，编译过程依赖于这些.js文件的维护顺序列表，以确保正确的编译和输出顺序。

在过去，我尝试让babel插件按照自己的顺序编译这些文件。 不幸的是，由于缺少声明的类而导致运行时错误（受错误的编译顺序影响）。

我的问题现在是：有什么方法可以自动保证正确的编译顺序，而不是手动维护此列表？
如果不是，是否有任何ES6编译器可以自动保证正确的编译顺序？

感谢你并致以真诚的问候

Answer 1

我认为问题是，babel无法解决您的依赖关系。

例如：

// 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'));
});

这里的问题是，babel找不到它的父类，因为它不是在ComponentA类之前定义的。 我有同样的问题，没有解决方案。

例如，您可以从类中导入React并将其编译为es5，一切都很好...