我正在尝试使用 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 文件很大，所以我不会在这里包含它，但浏览器最终会抛出错误

Uncaught ReferenceError: require is not defined

我使用这些命令在普通版本的 browserify 中正确运行了完全相同的设置

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

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

最佳答案

更新:我为此写了一篇新文章，使用不同的打包工具。它还包括一个经过优化的 browserify 示例:Choosing the correct packaging tool for React JS

致任何阅读这篇文章以启动和运行 React JS 工作流的人:

我在让它工作时遇到了很多问题，最后写了一篇关于它的帖子:React JS and a browserify workflow .这是我的解决方案，确保您可以转换 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']);

要解决在 chrome 中使用 React 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);

我希望这会帮助你继续前进!

关于javascript - 对我的 React.js 模块使用 gulp-browserify 我在浏览器中得到 'require is not defined'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24190351/