9

Gulp、Browserify、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

この問題を解決する方法について何か考えはありますか?

4

1 に答える 1

4

この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"))
})
于 2015-05-15T04:02:03.753 に答える