はなぜ一気作業

は、これが私の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') 
    );

私はブラウザを起動しても何も表示されないことがあります。パッキング処理中にエラーは表示されません。

出典

2017-11-20 answerhua

ブラウザのエラーを表示するには、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']);

具体的には、コンポーネントにいくつかのエラーがあります。これは、代わりに代わりReactDomのPurecomponentとReactDOMのPureComponent次のようになります。

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

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

出典

2017-11-20 03:09:44

私はPureComponentの代わりPurecomponentを使用して、それが何の問題@answerhua – answerhua

をworkded、どうもありがとうございました。私が言及したように、私はエラーイベントを購読することをお勧めします。それは多くの開発をより簡単になります:) –

私はReact.ComponentにReact.Purecomponentを変更すると、それが動作します。

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

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

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

出典

2017-11-20 03:29:34

はい、ありがとう – answerhua

答えて

関連する問題