在ES6中使用Gulp编译React时出现语法错误

Syntax Error when using Gulp to compile React in ES6

本文关键字：语法 错误 React 编译 ES6 Gulp      更新时间：2023-09-26

当我尝试使用React编译以下代码时，我得到了以下错误。我在这样一个简单的程序中看不到这个问题，并且当我克隆git-reo时，示例代码编译正确。

main.js:

import React from 'react';
import HelloWorld from './components/helloworld';
//import HelloWorld from './hello-world-es5';
React.render(
    <HelloWorld phrase="ES6"/>,
    document.body
);

HelloWorld：

import React from 'react';

class HelloWorld extends React.Component {
    render() {
        return <h1>Hello from {this.props.phrase}!</h1>;
    }
}
export default HelloWorld;

错误：

SyntaxError: /Users/**/**/**/**/js/main.js: Unexpected token (7:4)
  5 | 
  6 | ReactDOM.render(
> 7 |     <HelloWorld phrase="ES6"/>,
    |     ^
  8 |     document.body
  9 | );
    at Parser.pp.raise 
Process finished with exit code 1

我在使用babelify、browserfy和react的最新版本时遇到了这个问题。您需要为babelify的最新版本指定一个预设配置。es6吞咽任务可能看起来像这样：

'use strict';
import browserify from 'browserify';
import babelify from 'babelify';
import reactPreset from 'babel-preset-react';
import es2015Preset from 'babel-preset-es2015';
import source from 'vinyl-source-stream';
import buffer from 'vinyl-buffer';
import gulp from 'gulp';
import gutil from 'gulp-util';
import uglify from 'gulp-uglify';
import sourcemaps from 'gulp-sourcemaps';
import config from '../config'; //externalized json config file
gulp.task('compile', function () {
    var b = browserify({
        entries: config.entries,
        debug: true,
        transform: [babelify.configure({'presets': [reactPreset, es2015Preset]})]
    });
    return b.bundle()
        .pipe(source(config.source))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(uglify())
        .on('error', gutil.log)
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(config.dest));
});

请注意，正在向browserfy传递一个配置对象，该对象包含用于包含babelify转换的transform属性，babelify也正在使用对象进行配置。babelify配置对象包含预设。您还应该npm安装您想要使用的预设。你可以在https://github.com/babel/babelify#options.

我注意到的另一件事是，你没有提到你的Reactjs版本。最近的是0.14.2，比0.13.3有一些显著的变化。使用最新版本，您还需要react-dom，并将其用作组件到dom的挂载点。

相关文章：