web-dev-qa-db-fra.com

Utilisation de gulp-browserify pour mes modules React.js que je reçois «le besoin n'est pas défini» dans le navigateur

J'essaie d'utiliser gulp-browserify pour générer un fichier bundle.js qui peut être inclus dans le navigateur du client et commencer le rendu React composants.

Voici mon fichier App.js:

/** @jsx React.DOM */
var React = require('react');

var App = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}!</h1>;
  }
});

module.exports = App;

Et mon package.json:

  "name":"hellosign-gulp",
  "version":"0.1.1",
  "dependencies": {
    "gulp": "3.5.x",
    "gulp-browserify": "0.5.0",
    "reactify": "~0.8.1",
    "react": "^0.10.0",
    "gulp-react": "0.2.x"
  }
}

et mon gulpfile

var   gulp = require('gulp'),
  react = require('gulp-react'),
  browserify = require('gulp-browserify');


gulp.task('brow-test', function() {
    // Single entry point to browserify
    gulp.src('./src/App.js', {read: false})
        .pipe(browserify({
          insertGlobals : true,
          transform: ['reactify'],
          extensions: ['.jsx'],
          debug :false.
        }))
        .pipe(gulp.dest('.'))
});

Maintenant, lorsque j'exécute "brow-test", je renomme le fichier de sortie en bundle.js et l'inclus avec la réponse HTTP pour le navigateur. Le fichier bundle.js est assez volumineux, donc je ne l'inclurai pas ici, mais le navigateur finit par générer une erreur

Uncaught ReferenceError: require n'est pas défini

J'ai exactement la même configuration qui fonctionne correctement avec la version régulière de browserify en utilisant ces commandes

browserify -t reactify -r react -r ./src/App > ../webapp/static/bundle.js

Et puis je ne reçois pas l'erreur. Pourquoi gulp-browserify ne crée-t-il pas correctement la cale requise?

javascriptnode.jsgulpreactjsbrowserify
21
asolberg

MISE À JOUR: J'ai écrit un nouveau message à ce sujet, en utilisant différents outils d'emballage. Il comprend également un exemple optimisé de browserify: Choisir le bon outil d'emballage pour React JS

À tous ceux qui lisent ce message pour obtenir un React workflow JS opérationnel:

J'ai eu beaucoup de problèmes pour que cela fonctionne, et j'ai fini par écrire un post dessus: React JS et un flux de travail browserify . C'est ma solution, en vous assurant que vous pouvez transformer votre JSX et gérer la surveillance séparée des autres fichiers.

var gulp = require('gulp');
var source = require('vinyl-source-stream'); // Used to stream bundle for further handling etc.
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify'); 
var concat = require('gulp-concat');

gulp.task('browserify', function() {
    var bundler = browserify({
        entries: ['./app/main.js'], // Only need initial file, browserify finds the deps
        transform: [reactify], // We want to convert JSX to normal javascript
        debug: true, // Gives us sourcemapping
        cache: {}, packageCache: {}, fullPaths: true // Requirement of watchify
    });
    var watcher  = watchify(bundler);

    return watcher
    .on('update', function () { // When any files update
        var updateStart = Date.now();
        console.log('Updating!');
        watcher.bundle() // Create new bundle that uses the cache for high performance
        .pipe(source('main.js'))
        // This is where you add uglifying etc.
        .pipe(gulp.dest('./build/'));
        console.log('Updated!', (Date.now() - updateStart) + 'ms');
    })
    .bundle() // Create the initial bundle when starting the task
    .pipe(source('main.js'))
    .pipe(gulp.dest('./build/'));
});

// I added this so that you see how to run two watch tasks
gulp.task('css', function () {
    gulp.watch('styles/**/*.css', function () {
        return gulp.src('styles/**/*.css')
        .pipe(concat('main.css'))
        .pipe(gulp.dest('build/'));
    });
});

// Just running the two tasks
gulp.task('default', ['browserify', 'css']);

Pour résoudre le problème d'utilisation du fichier React JS DEV-TOOLS en chrome, voici ce que vous devez faire dans votre fichier main.js:

/** @jsx React.DOM */

var React = require('react');
// Here we put our React instance to the global scope. Make sure you do not put it 
// into production and make sure that you close and open your console if the 
// DEV-TOOLS does not display
window.React = React; 

var App = require('./App.jsx');
React.renderComponent(<App/>, document.body);

J'espère que cela vous aidera à démarrer!

12
christianalfoni

Exécutez browserify directement sur votre fichier et n'utilisez pas le plugin gulp-browserify.

Référencé ici: https://github.com/gulpjs/plugins/issues/47

"Browserify doit être utilisé comme un module autonome. Il renvoie un flux et calcule votre graphique de dépendance. Si vous avez besoin d'objets en vinyle, utilisez browserify + vinyl-source-stream"

vous pouvez obtenir les résultats que vous souhaitez comme ceci:

var source = require('vinyl-source-stream'), //<--this is the key
    browserify = require('browserify');

    function buildEverything(){
        return browserify({
               //do your config here
                entries: './src/js/index.js',
            })
            .bundle()
            .pipe(source('index.js')) //this converts to stream
             //do all processing here.
             //like uglification and so on.
            .pipe(gulp.dest('bundle.js'));
        }
    }

    gulp.task('buildTask', buildEverything);

maintenant, dans votre package Json, comme vous l'avez - besoin de réagir, de naviguer et ainsi de suite. Vous pouvez également shim browserify ici, utiliser des transformations ou autre chose.

  "dependencies": {
    "react": "^0.10.0",  
  },
  "devDependencies": {
     "browserify": "3.46.0",
    "browserify-shim": "3.x.x",
   }
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  },
  "browserify-shim": {
     "react": "React", 
  }

ou jsut faire comme vous êtes, et inclure réagir sur la page que vous utilisez

var React = require('react');

ou ceci si vous voulez quelques trucs d'aide utiles:

var React = require('react/addons');

Mais l'essentiel est d'utiliser browserify directement dans gulp et d'utiliser le vinyle-source-stream pour entrer dans le pipeline de gulp.

8
the_5imian

J'utilise celui-ci pour mon travail de réaction.

var gulp = require('gulp');
var source = require('vinyl-source-stream'); 
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify'); 
var concat = require('gulp-concat');
 
gulp.task('browserify', function() {
    var bundler = browserify({
        entries: ['./assets/react/main.js'], 
        transform: [reactify],
        debug: true, 
        cache: {}, packageCache: {}, fullPaths: true 
    });
    var watcher  = watchify(bundler);

    return watcher
    .on('update', function () { 
        var updateStart = Date.now();
        console.log('Updating!');
        watcher.bundle() 
        .pipe(source('main.js'))
    
        .pipe(gulp.dest('./assets/js/'));
        console.log('Updated!', (Date.now() - updateStart) + 'ms');
    })
    .bundle() 
    .pipe(source('main.js'))
    .pipe(gulp.dest('./assets/js/'));
});



gulp.task('default', ['browserify']);
2
Tareq Jobayere

Voici la recette de gulp pour utiliser browserify (avec vinyl-transform et amis) pour obtenir l'équivalent exact de

browserify -t reactify -r react -r ./src/App > ../webapp/static/bundle.js`

dans src/App.js

/** @jsx React.DOM */
var React = require('react');

var App = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}!</h1>;
  }
});

module.exports = App;

dans gulpfile.js

var gulp = require('gulp');
var browserify = require('browserify');
var transform = require('vinyl-transform');
var reactify = require('reactify');
var rename = require("gulp-rename");

gulp.task('build', function () {

  // browserify -t reactify -r react -r ./src/App > ../webapp/static/bundle.js

  var browserified = transform(function(filename) {
    return browserify()

      // -t reactify
      .transform(reactify)

      // -r react
      // update below with the correct path to react/react.js node_module
      .require('./node_modules/react/react.js', { expose: 'react'})

      // -r ./src/App
      // filename = <full_path_to>/src/App.js
      .require(filename, {expose: 'src/App'})
      .bundle();
  });
  return gulp.src('./src/App.js')
    .pipe(browserified)
    .pipe(rename('bundle.js'))
    .pipe(gulp.dest('../webapp/static/'));
});

gulp.task('default', ['build']);
1
Hafiz Ismail

Je ne vois pas directement ce qui ne va pas avec votre code, mais j'utilise ceci

gulp.src('./src/js/index.js') .pipe(browserify()) .on('prebundle', function(bundle) { // React Dev Tools tab won't appear unless we expose the react bundle bundle.require('react'); }) .pipe(concat('bundle.js'))

J'ai utilisé https://www.npmjs.org/package/gulp-react pour transformer le .jsx mais de nos jours je préfère utiliser le javascript standard.

Faites-moi savoir si cela fonctionne pour vous, sinon je pourrais extraire un exemple de modèle ...

0
wires

package.json:

{
  "devDependencies": {
    "gulp": "^3.8.11",
    "gulp-browserify": "^0.5.1",
    "reactify": "^1.1.0"
  },
  "browserify": {
    "transform": [["reactify", { "es6": true }]],
    "insertGlobals": true,
    "debug": true
  }
}

gulpfile.js:

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

gulp.task('browserify', function() {
    return gulp.src("./assets/index.js")
        .pipe(browserify())
        .pipe(gulp.dest("./www/assets"));
});
0
monkey

Définir

React=require('react');
ReactDOM = require('react-dom');

ces valeurs javascript globales dans un App.js, que de mettre cela

var stream = require('vinyl-source-stream');
var browserify = require('browserify');
    browserify(source + '/app/app.js')
        // bundles it and creates a file called main.js
        .bundle()
        .pipe(stream('main.js'))
        // saves it the dest directory
        .pipe(gulp.dest(destination +'/assets/js'));

dans Gulpfile.js.

Et pour la fin, mettez main.js en HTML, et cela devrait fonctionner.

Le problème est que si nous utilisons var React = require ('react'), l'objet React n'est pas visible depuis un autre script, mais React = require ('react') définit une valeur globale.

0
ahll