无法让es6与Gulp合作

Question

这让我疯了,所以我希望有人可能会看到我遗失的东西.提前谢谢你的帮助.

我有一个gulp文件,我通过npm,babel-core,babel-preset-es2015,babel-preset-react安装.从在线研究和寄予厚望,即使这可能不对,我已将gulp文件重命名为gulpfile.babel.js并且我已经创建了一个.babelrc文件

{
  "presets": ["es2015"]
}

我正在使用browsersync,当我启动gulp任务时,html文件加载,但index.js我包含'import React ....'.这个文件导致JS控制台中出现"Uncaught SyntaxError:Unexpected token import"错误.

我认为我拥有的es2015 npm软件包应该处理ES6语法？

在gulp文件中,我认为要考虑的任务是;

// convert jsx to JS
gulp.task('babelFiles', function() {
    return gulp.src('js/*.(jsx|js)')
        .pipe(babel({
            compact: false
            }))
        .pipe(gulp.dest('js'))
        .pipe(browserSync.reload({
            stream: true
        }))
});

负责启动它的gulp任务是:

// Default task
gulp.task('default', ['babelFiles', 'browserSync']);

我很困惑这里可能出现什么问题？

任何想法将非常感谢!

Answer 1

有两个问题：

1. Gulp 似乎不支持文件扩展名掩码的语法：

   gulp.src('js/*.(jsx|js)') // not working
   gulp.src('js/*.{js,jsx}') // working
   

2. 您从js一个目录到js另一个目录进行管道传输，但由于问题（1）而没有匹配项，它让您相信 babel 无法工作

更新

Gulp 使用glob 语法来匹配文件 - 根据 glob 语法，项目数量的限定符应该包含在前面( | )- 在我们的例子中，以下语法是有效的

gulp.src('js/*.@(js|jsx)')

其中@意味着 与 后模式的一次出现完全匹配@。

在您的情况下，没有提供限定符