将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),它看起来像它不会是有史以来可能.你几乎被迫如果你想使用ES6 transpiled与巴贝尔使用这些工具,但你不会有使用生成的代码与其他级联/内嵌的JavaScript,因为所有那些(几率require()呼叫,而不是全局变量window).很遗憾巴贝尔不允许改变这种行为.