Babelify ParseError 'import' 和 'export' 可能只出现在'sourceType: module'

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;

我以这种方式创建一个墨西哥文件，指定(我认为(正确的处理器：

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 }添加到墨西哥湾：

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