javascript - online - Uso de gulp-browserify para mis módulos React.js que estoy obteniendo ''require no is defined'' en el navegador

browserify vs webpack

Question

Estoy tratando de usar gulp-browserify para generar un archivo bundle.js que pueda incluirse en el navegador del cliente y comenzar a renderizar los componentes React.

Aquí está mi archivo 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;

Y mi paquete.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"
  }
}

y mi 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(''.''))
});

Ahora, cuando ejecuto "prueba de cejas", cambio el nombre del archivo de salida a bundle.js y lo incluyo con la respuesta HTTP para el navegador. El archivo bundle.js es bastante grande, así que no lo incluiré aquí, pero el navegador termina arrojando un error.

Error de referencia no detectado: no está definido

Tengo esta misma configuración que se ejecuta correctamente con la versión regular de browserify usando estos comandos

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

Y luego no me da el error. ¿Por qué gulp-browserify no crea correctamente el shim requerido?

Answer 1

Aquí está la receta browserify para usar browserify (con vinyl-transform y amigos) para lograr el equivalente exacto de

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

en 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;

en 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'']);

Answer 2

Definir

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

esos valores javascript globales en un App.js, que poner esto

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''));

en Gulpfile.js.

Y para el final, ponga main.js en HTML, y debería funcionar.

El problema es si usamos var React = require (''reaccionar''), el objeto React no es visible desde otro script, pero React = require (''reaccion'') define un valor global.

Answer 3

Ejecute browserify directamente en su archivo, y no use el complemento gulp-browserify.

Referenciado aquí: https://github.com/gulpjs/plugins/issues/47

"Browserify se debe usar como un módulo independiente. Devuelve una secuencia y determina su gráfico de dependencia. Si necesita objetos de vinilo, use browserify + vinyl-source-stream"

Puedes lograr los resultados que deseas de esta manera:

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);

ahora, en su paquete, Json, como lo ha hecho, requiera reaccionar, verifique y así sucesivamente. También puedes guardar el navegador aquí, usar transformaciones o lo que sea.

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

o simplemente haga lo que es, e incluya reaccionar en la página que usa.

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

o esto si quieres algunas de las cosas útiles de ayuda:

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

Pero la conclusión es usar browserify directamente en gulp y usar la fuente de vinilo para entrar en la tubería gulp.

Answer 4

No veo directamente lo que está mal con tu código, pero estoy usando esto

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''))

Utilicé https://www.npmjs.org/package/gulp-react para transformar el .jsx, pero hoy en día prefiero usar javascript normal.

Déjeme saber si esto funciona para usted, si no podría extraer una plantilla de ejemplo ...

Answer 5

Yo uso este para mi trabajo de reacción.

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'']);

Answer 6

paquete.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"));
});

Answer 7

ACTUALIZACIÓN: escribí una nueva publicación sobre esto, usando diferentes herramientas de empaquetado. También incluye un ejemplo optimizado de browserify: Elegir la herramienta de empaquetado correcta para React JS

A cualquiera que lea esta publicación para obtener un flujo de trabajo React JS en funcionamiento:

Tuve muchos problemas para hacer que esto funcionara, y terminé escribiendo un post sobre el mismo: React JS y un flujo de trabajo de browserify . Esta es mi solución, asegurándome de que pueda transformar su JSX y manejar la visualización separada de otros archivos.

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'']);

Para resolver el problema de usar React JS DEV-TOOLS en Chrome, esto es lo que tienes que hacer en tu archivo 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);

Espero que esto te ayude a ponerte en marcha!