以编程方式使用时出现 Babelify sourceType 错误

Question

我正在使用 Gulp, Browserify and Babelify 将我的源代码从 ES6 + JSX 编译为纯 Javascript。

我的 gulpfile.js 看起来像：

var gulp = require('gulp')
var fs = require("fs")
var browserify = require("browserify")
var babelify = require("babelify")

gulp.task('es6',function(){
  return browserify({ debug: true })
    .transform(babelify.configure({
      extensions: ['.es6']
    }))
    .require("./src/es6/app.es6", { entry: true })
    .bundle()
    .on("error", function (err) { console.log("Error : " + err.message); })
    .pipe(fs.createWriteStream("./build/js/bundle.js"))
})

我的app.es6的第一行是：

"use strict"

import React from 'react'
import MenuBar from './menu'

当我运行 $ gulp es6 时，出现以下错误：

Error : 'import' and 'export' may appear only with 'sourceType: module'

然而，当我使用 Browserify 的 cli 时，这不会发生：

$ browserify src/es6/app.es6 -t babelify -o build/js/bundle.js --extension=.es6

关于如何解决这个问题有什么想法吗？

Answer 1

需要将extensions:['.es6']选项添加到browserify的配置中：

browserify({ debug: true, extensions: ['.js', '.json', '.es6'] })

整个 gulpfile 应该是这样的：

var gulp = require('gulp')
var fs = require("fs")
var browserify = require("browserify")
var babelify = require("babelify")

gulp.task('es6',function(){
  var extensions = ['.js','.json','.es6'];
  return browserify({ debug: true, extensions:extensions })
    .transform(babelify.configure({
      extensions: extensions
    }))
    .require("./src/es6/app.es6", { entry: true })
    .bundle()
    .on("error", function (err) { console.log("Error : " + err.message); })
    .pipe(fs.createWriteStream("./build/js/bundle.js"))
})

以编程方式使用时出现 Babelify sourceType 错误

Babelify sourceType error when used programmatically

javascript

reactjs

browserify

ecmascript-6

babeljs