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']

Babelify ParseError＆＃39; import＆＃39;和＆＃39;出口＆＃39;可能只出现在＆＃39; sourceType：module＆＃39;

1 个答案: