个人中心
gpt4 book ai didi

javascript - Gulp，未捕获的语法错误 : Unexpected token <

转载 作者：行者123 更新时间：2023-11-28 06:11:45 25 4
gpt4 key购买 nike

我正在尝试使用 React 制作一个简单的联系人列表，当我执行“gulp”命令时一切都很好，但是当我转到 chrome 时它没有显示任何内容。 Chrome 控制台显示:

"Uncaught SyntaxError: Unexpected token <" at my main.js:10 file

但是我觉得还好。

这是我的 main.js 文件:

var App = require('./components/App');
var React = require('react');
var ReactDOM = require('react-dom');
var AppAPI = require('./utils/appAPI.js');


AppAPI.getContacts();

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

这是我的 gulpfile.js

var gulp = require('gulp');
var browserify = require('browserify');
var reactify = require('reactify'); // Converts jsx to js
var source = require('vinyl-source-stream'); // Converts string to a stream

gulp.task('browserify', function(){
    browserify('./src/js/main.js')
        .transform('reactify')
        .bundle()
        .pipe(source('main.js'))
        .pipe(gulp.dest('dist/js'));
});

gulp.task('copy', function(){
    gulp.src('src/index.html')
        .pipe(gulp.dest('dist'));
    gulp.src('src/css/*.*')
        .pipe(gulp.dest('dist/css'));
    gulp.src('src/js/vendors/*.*')
        .pipe(gulp.dest('dist/js'));
});

gulp.task('default', ['browserify', 'copy'], function(){
    return gulp.watch('src/**/*.*', ['browserify', 'copy']);
});

这是我的 Index.html 文件

<html>
<head>
    <title>ReactApp</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="app" class="container"></div>

    <script src="js/jquery-1.12.0.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

App.js 是

var React = require('react');
var AppActions = require('../actions/AppActions');
var AppStore = require('../stores/AppStore');
var AddForm = require('./AddForm.js');

function getAppState(){
    return {
        contacts: AppStore.getContacts()
    }
}

var App = React.createClass({
    getInitialState: function(){
        return getAppState();
    },

    componentDidMount: function(){
        AppStore.addChangeListener(this._onChange);
    },

    componentUnmount: function(){
        AppStore.removeChangeListener(this._onChange);
    },

    render: function(){
        console.log(this.state.contacts);
        return(
            <div>
                <AddForm />
            </div>
        );
    },

    // Update view state when change is received
    _onChange: function(){
        this.setState(getAppState());
    }
});

module.exports = App;

最佳答案

您的 gulp 任务需要一些工作:您需要使用 gulp.src 来获取您的 main.js 文件。那么，transform 是 gulp-browserify 的一个选项，而不是您想要通过管道传输流的选项，对于 bundle 来说也是如此。

gulp.task('scripts', function () {
  return gulp.src('./assets/js/main.js')
    .pipe(browserify({
      transform: [reactify]
    }))
    .pipe(gulp.dest('./static/js'));
});

关于javascript - Gulp，未捕获的语法错误 : Unexpected token <，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36315341/

25 4 0
文章推荐： css - 自定义 - BG 颜色和 BG 图像显示
文章推荐： javascript - 页面刷新时脚本无法正常工作
文章推荐： javascript - 从 laravel 5 中的下拉框中选择项目时，应更改隐藏的输入值
文章推荐： javascript - React-chartjs错误无法读取未定义的属性 'Chart'
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com