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，一切都很好...

Gulp BabelJs编译发出错误的命令

1 个答案: