javascript - 将 Babel 与单个输出文件和 ES6 模块一起使用

Question

这是将我的 ES6 代码编译成单个 ES5 文件的 gulp 任务。我在 ES6 中使用类和模块(import、export)。

  gulp.src(paths.scripts)
        .pipe(sourcemaps.init())
        .pipe(babel({
          presets: ['es2015']
         }))
        .pipe(concat('all.js'))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./www/js'));

但是，由于 Babel 将 ES6 import 指令编译为 require 命令，并且 require 将尝试请求文件，因此请求文件失败因为所有的 ES5 代码都被合并到一个文件 all.js 中。

结果是一堆“错误:找不到模块”错误。当所有模块都保存在单个文件中时，我如何编译可以正常工作的模块？

Answer 1

您不是第一个需要使用 Babel 将 JSX/ES6 转换为 ES5 但又不使用 CommonJS 模块和 Browserify/Webpack 的人。不幸的是，事实证明这在当时是不可能的( 1 ， 2 ， 3 )，而且看起来永远不可能。如果你想使用通过 Babel 转译的 ES6，你几乎不得不使用这些工具，但你将没有机会将结果代码与其他连接/内联 JavaScript 一起使用(因为所有这些 require() 调用而不是 window 上的全局变量)。很遗憾 Babel 不允许更改此行为。