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

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

其中 @ 表示精确匹配 @ 之后出现的一个模式。

就您而言，没有提供限定符