使用gulp-browserify为我的React.js模块我在浏览器中得到'require is not defined'

Question

我正在尝试使用gulp-browserify生成一个bundle.js文件,该文件可以包含在客户端的浏览器中并开始呈现React组件.

这是我的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;

还有我的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"
  }
}

和我的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('.'))
});

现在,当我运行'brow-test'时,我将输出文件重命名为bundle.js,并将其包含在浏览器的HTTP响应中.bundle.js文件非常大,所以我不会在这里包含它,但浏览器最终会抛出错误

未捕获的ReferenceError:未定义require

我使用这些命令使用常规版本的browserify正确运行了这个完全相同的设置

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

然后我没有得到错误.为什么gulp-browserify没有正确创建require shim？

Answer 1

更新:我使用不同的打包工具写了一篇新文章.它还包括一个优化的browserify示例:为React JS选择正确的打包工具

阅读这篇文章的任何人都可以启动并运行React JS工作流程:

我有很多问题要解决这个问题,最后写了一篇文章:React JS和browserify工作流程.这是我的解决方案,确保您可以转换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']);

为了解决在使用铬的阵营JS DEV-TOOLS的问题,这是你在你做什么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);

我希望这会帮助你开始!

Answer 2

直接在您的文件上运行browserify,不要使用gulp-browserify插件.

在此引用:https://github.com/gulpjs/plugins/issues/47

"Browserify应该用作独立模块.它返回一个流并找出你的依赖图.如果你需要乙烯基对象,请使用browserify + vinyl-source-stream"

你可以像这样实现你想要的结果:

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,你有 - 需要反应,browsierify等.你也可以在这里填充浏览器,使用转换或其他任何东西.

  "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中使用browserify并使用vinyl-source-stream进入gulp管道.

Answer 3

我没有直接看到你的代码有什么问题，但我正在使用这个

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。

让我知道这是否适合您，如果不适合我可以提取示例模板...