Babelify ParseError“进口”和“出口”可能会出现只与“sourceType的：模块”

Question

我试图建立与这个简单结构的项目：

app 
|-- components 
|  |-- App.jsx 
|  |-- Root.jsx 
|-- index.jsx 

index.jsx看起来是这样的：

import React from 'react'; 
import { createStore } from 'redux'; 
import { render } from 'react-dom'; 

import Root from 'app/components/core/Root'; 

const store = createStore(); 

render(<Root store={ store } />, document.getElementById('root')); 

和Root.jsx看起来是这样的：

import React from 'react'; 
import { Provider } from 'react-redux'; 
import { BrowserRouter, Route } from 'react-router-dom'; 

import App from 'app/components/core/App'; 

const Root = ({ store }) => { 
    return <Provider store={ store }> 
     <BrowserRouter> 
      <Route path='/' component={ App } /> 
     </BrowserRouter> 
    </Provider> 
}; 

Root.propTypes = { 
    store: React.PropTypes.object.isRequired, 
}; 

export default Root; 

我创建了一个文件，一饮而尽这种方式，SPE cifying的（我认为）正确的处理器为Babelify：

var gulp = require('gulp'), 
buffer = require('vinyl-buffer'), 
browserify = require('browserify'), 
babelify = require('babelify'), 
source = require('vinyl-source-stream'), 
gutil = require('gulp-util'); 


gulp.task('build', function() { 
    var browserifyOptions = { 
     debug: true, 
     entries: './app/index.jsx', 
     extensions: ['.jsx', '.js'], 
    }; 

    return browserify(browserifyOptions) 
     .transform(babelify.configure({ 
      presets: ['es2015', 'react'] 
     })) 
     .bundle() 
     .on('error', gutil.log) 
     .pipe(source('app.js')) 
     .pipe(buffer()) 
     .pipe(gulp.dest('./lima/static')); 
}); 

gulp.task('default', ['build']); 

现在奇怪的是我得到这样的：

Root.jsx:1 
import React from 'react'; 
^ 
ParseError: 'import' and 'export' may appear only with 'sourceType: module' 

奇怪的是，index.jsx似乎工作得很好，如果我删除任何babel presets我在那个文件中得到了错误。 Root.jsx或我的gulpfile有什么不对？

Answer 1

您需要添加{ modules: false }您gulpfile：

presets: [['es2015', { modules: false }], 'react']