Используя gulp -browserify для моих модулей React.js, я получаю "require not defined" в браузере

Ответ 1

ОБНОВЛЕНИЕ: Я написал новое сообщение об этом, используя различные инструменты для упаковки. Он также включает оптимизированный пример браузера: Выбор правильного инструмента для упаковки для React JS

Кому-нибудь, кто прочтет это сообщение, чтобы запустить и запустить React JS:

У меня было много проблем, чтобы заставить это работать, и закончил тем, что написал на нем сообщение: Реагировать на JS и рабочий процесс браузера. Это мое решение, чтобы вы могли трансформировать свой JSX и обрабатывать отдельный просмотр других файлов.

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

Чтобы решить проблему использования React JS DEV-TOOLS в chrome, это то, что вам нужно сделать в файле 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);

Надеюсь, это поможет вам уйти!

Ответ 2

Запустите браузер прямо в свой файл и не используйте плагин gulp -browserify.

Ссылка здесь: https://github.com/gulpjs/plugins/issues/47

"Browserify следует использовать как автономный модуль, он возвращает поток и вычисляет график зависимости. Если вам нужны виниловые объекты, используйте браузеру + поток с виниловым источником"

вы можете добиться желаемых результатов:

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

теперь, в вашем пакете Json, как и у вас, - требуйте реакции, браузера и т.д. Вы также можете прокручивать браузеру, использовать преобразования или что-то еще.

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

или jsut, как и вы, и включите реакцию на странице, которую вы используете.

var React = require('react');

или это, если вы хотите использовать некоторые полезные помощники:

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

Но нижняя строка - использовать браузеру непосредственно в gulp и использовать поток с виниловым источником для перехода в конвейер gulp.

Ответ 3

Я использую это для своей работы.

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

Ответ 4

Здесь gulp рецепт использования browserify (с vinyl-transform и друзьями) для достижения точного эквивалента

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

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

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

Ответ 5

Я не вижу прямо, что не так с вашим кодом, но я использую этот

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

Я использовал https://www.npmjs.org/package/gulp-react, чтобы преобразовать .jsx, но в настоящее время предпочитаю использовать обычный javascript.

Сообщите мне, если это сработает для вас, если бы я не смог извлечь примерный шаблон...

Ответ 6

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

Ответ 7

Определить

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

это глобальное значение javascript в App.js, чем положить это

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

в Gulpfile.js.

И для последнего, поместите main.js в HTML, и он должен работать.

Проблема заключается в том, что мы используем var React = require ('react'), объект React не видим из другого script, но React = require ('react') определяет глобальное значение.