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;

我以这种方式创建了一个 gulp 文件，为 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']