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

有两个问题：

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

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

您从js目录切换到js目录，但由于问题（1）没有匹配，因此您认为该babel无法正常工作

<强>更新

Gulp使用glob syntaxt来匹配文件 - 根据glob语法，应该在( | )之前包含项目数量的限定符 - 在我们的情况下，后面的语法将是有效的

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

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

在你的情况下，没有提出限定词

无法让es6与Gulp合作

1 个答案: