语法错误在使用Gulp编译在ES6中的反应 [英] Syntax Error when using Gulp to compile React in ES6
问题描述
当我尝试使用React编译以下代码时,我会收到以下错误。我在这样一个简单的程序中看不到问题,当我克隆git repo时,示例代码正确编译。
When I try to compile the following code using React I get the error below. I don't see the issue in such a simple program and the example code compiles correctly when I clone the git repo.
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:
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,browserify和反应。您需要为最新版本的babelify指定一个预设配置。一个es6 gulp任务可能看起来像这样:
I ran into this problem while using the latest versions of babelify, browserify, and react. You need to specify a presets configuration for the latest versions of babelify. An es6 gulp task might look something like this:
'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));
});
请注意,browserify正在传递一个包含transform属性的配置对象,用于包含babelify变换,也正在配置一个对象。 babelify配置对象包含预设。您还应该npm安装您要使用的预设。您可以在 https://github.com/babel/babelify#options 上阅读更多信息。
Note that the browserify is being passed a configuration object that contains the transform property for containing the babelify transform that is also being configured with a object. The babelify configuration object contains the presets. You should also npm install the presets that you wish to use. You can read more about this at https://github.com/babel/babelify#options.
我注意到的另一件事是你没有提到你的Reactjs版本。最新值为0.14.2,比0.13.3发生了重大变化。使用最新版本,您还需要反应dom,并将其用作组件到DOM的挂载点。
One other thing that I noticed is that you don't mention your Reactjs version. The latest is 0.14.2 which made some significant changes over 0.13.3. Using the latest you would also need react-dom and use that as the mount point for your component to the DOM.
这篇关于语法错误在使用Gulp编译在ES6中的反应的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!