无法让 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 控制台中出现“未捕获的语法错误：意外的令牌导入”错误。

我认为我拥有的 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 syntaxt 匹配文件 - 根据 glob 语法，项目数量的限定符应包含在 ( | ) 之前 - 在我们的例子中，以下语法是有效的

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

其中@ 表示在@ 之后恰好匹配一次出现的模式。

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