npm – 无法让es6与Gulp合作

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

我有一个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']);

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

任何想法将非常感谢！

解决方法

有两个问题：

> 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)')

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

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

npm – 无法让es6与Gulp合作

解决方法

相关文章