react.js - gulp browserify 打包reactjs 报错一直报错

问题描述

问 题

gulpfile配置文件如下：

gulp.task('browserify-index', function () {
  return browserify({entries: 'src/client/js/main.js', debug: true})
    // // .external(dependencies)
    .transform(babelify, {presets: ['es2015', 'react']})
    .bundle()
    // .pipe(source('bundle.js'))
    // .pipe(buffer())
    // .pipe(sourcemaps.init({loadMaps: true}))
    // // .pipe(gulpif(production, uglify({mangle: false})))
    // .pipe(sourcemaps.write('.'))
    // // .pipe(rename('bundle.js'))
    .pipe(gulp.dest('public/js'));
});

然后 main。js 如下

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';



ReactDOM.render(
  <App name='蛤蛤蛤' />,
  document.getElementById('react')
);

然后报错如下

$ gulp
[11:59:13] Using gulpfile ~\Downloads\chatroom-master (1)\chatroom-master\gulpfile.js
[11:59:13] Starting 'browserify-index'...

events.js:141
      throw er; // Unhandled 'error' event
      ^
SyntaxError: Unexpected token

这个问题已被关闭，原因：问题已解决 - 问题已解决，且对他人无借鉴意义

解决方案

这么写：

.transform('babelify', {
    presets: [ 'es2015', 'react' ]
})

这篇关于react.js - gulp browserify 打包reactjs 报错一直报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！