Question

这是我的gulpfiles.js：

let gulp = require('gulp');
let uglify = require('gulp-uglify');
let browserify = require('browserify');
let babelify = require('babelify');
let source = require('vinyl-source-stream');
let buffer = require('vinyl-buffer');


    gulp.task('js',()=>{
        browserify({
            entries : ['App/app.js'],
            extensive : ['.js'],
            debug:true
        })
            .transform(babelify,babelify.configure())
            .bundle()
            .pipe(source('app.js'))
            .pipe(buffer())
            .pipe(uglify())
            .pipe(gulp.dest('build'))
    });

    gulp.task('default',['js']);

这是我的.babelrc：

{
  "presets": ["es2015","react","stage-1"]
}

这是我的index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="fonts.css" />
    <link rel="shortcut icon" href="favicon.ico">
    <title>Weather-App</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="build/app.js"></script>
</html>

这是我的./App/app.js：

import React from 'react'
import ReactDom from 'react-dom'

    class Helloworld extends React.Purecomponent{
        render(){
            return(
                <h1> Good morning </h1>
            );
        }
    }

    ReactDom.render(
            <Helloworld />,
            document.getElementById('app')
    );

我不知道当我启动浏览器时，它什么都不显示。在包装过程中没有显示错误。

Answer 1

要查看browserify错误，您需要订阅error事件。尝试类似：

gulp.task('js',()=>{
    browserify({
        entries : ['App/app.js'],
        extensive : ['.js'],
        debug:true
    })
        .transform(babelify,babelify.configure())
        .bundle()
        .on('error', function (err) {
          console.log(err.message);
          this.emit('end');
        })
        .pipe(source('app.js'))
        .pipe(buffer())
        .pipe(uglify())
        .pipe(gulp.dest('build'))
});

gulp.task('default',['js']);

特别针对您的情况，您的组件存在一些错误。它应该是PureComponent而不是Purecomponent和ReactDOM而不是ReactDom：

class Helloworld extends React.PureComponent{
  render(){
    return(
      <h1> Good morning </h1>
    );
  }
}

ReactDOM.render(
  <Helloworld />,
  document.getElementById('container')
);

Answer 2

当我将React.Purecomponent更改为React.Component时，它可以正常工作。

＆＃13;

{{{entry.fields.body}}}

＆＃13;

为什么我的gulp不能工作

2 个答案: