Question

这是gulpfile.js：

var gulp = require('gulp'),
    browserify = require('gulp-browserify'),
    babel = require('gulp-babel'),
    babelify = require("babelify");

gulp.task('js', function () {
  gulp.src(config.paths.js.src)
    .pipe(browserify({
        insertGlobals : true,
        debug : true
      }))
    .pipe(gulp.dest(config.paths.js.dest))
});

在package.json中我添加了：

"browserify": {
  "transform": [["babelify", { "presets": ["react"] }]]
}

这是带有react的文件：

ReactDOM.render(
  <Overlay message="TEST" />,
  document.getElementById('content')
 );

最后，错误是：

components/main-component.js:15
            <div class="overlay">
            ^
ParseError: Unexpected token
    at wrapWithPluginError (/home/novak/Documents/myProjects/OpenWorld/node_modules/gulp-browserify/index.js:44:1

注意：我没有使用ES2015，只是普通的js。

我已经尝试了很多东西进入gulp任务，但它总是给我一些错误。有人可以告诉我如何让这项工作好吗？

更多来源：主component.js：

var React = require('react');
var ReactDOM = require('react-dom');
var Print = require('./main-template');

var Overlay = React.createClass({
    getInitialState: function() {
        return { show: false };
    },
    render: function() {
        if (!this.state.show) {
            return;
        }
        return(
            <div class="overlay">
                <div class="content">
                    <Print message="{this.props.message}"/>
                </div>
            </div>
        );
    }
});

ReactDOM.render(
  <Overlay message="TEST" />,
  document.getElementById('game-content')
 );

module.exports = Overlay;

Answer 1

您需要将.jsx转换为.js，因为浏览器不知道JSX。所以你需要先改变它。

将jsx转换为js的步骤：

确保已安装

gulp-babel
babel-plugin-transform-react-jsx

通过

npm install gulp-babel babel-plugin-transform-react-jsx

然后在您的gulp文件中

var gulp = require('gulp');
var babel = require('gulp-babel');

gulp.task("babel", function(){
    return gulp.src("src to jsx/*.jsx").
        pipe(babel({
            plugins: ['transform-react-jsx']
        })).
        pipe(gulp.dest("src to js/*.js"));
});

Browserify无法编译反应

1 个答案: