gulp + browserify + reactjs, Uncaught ReferenceError: React is not defined

Question

我正在尝试遵循此文件中建议的工作流程：https://gist.github.com/nateajohnson/4d16df279d2e3d2b6b16，因此最后我得到两个单独的 .js 文件：一个用于供应商库，另一个用于我自己的代码。

我的Gulpfile.js:

var gulp = require('gulp'), 
// ... there shouldn't be any problems

gulp.task('build-vendor', function() {
    var b = browserify({ debug: false});

    b.require(nodeResolve.sync('jquery'), { expose: 'jquery' });
    b.require(nodeResolve.sync('react'), { expose: 'react' });
    b.require(nodeResolve.sync('react/addons'), { expose: 'react/addons' });
    b.require(nodeResolve.sync('react-select'), { expose: 'react-select' });

    var stream = b.bundle()
        .pipe(source('vendor.js'))
        .pipe(gulp.dest('assets/build/js'))
        .pipe(buffer())
        .pipe(uglify())
        .pipe(rename('vendor.min.js'))
        .pipe(gulp.dest('assets/build/js'))
        .pipe(gzip())
        .pipe(gulp.dest('assets/build/js'));

    return stream;
}) ;


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

    var b = browserify('assets/dev/js/app.js', { debug: false });

    b.external('jquery');
    b.external('react');
    b.external('react-select');

    var stream = b.transform(babelify, { stage: 0 })
        .bundle()
        .on('error', function(e){
            console.log(e.message);
            this.emit('end');
        })
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('assets/build/js'));

    return stream;
});

当我尝试在自己的代码中使用 React 变量时，出现错误：

Uncaught ReferenceError: React is not defined

我可以通过包含

来摆脱这个

var React = require('react');

在我的每个使用 React 的 js 文件中， 或者通过包括

<script src="https://fb.me/react-0.13.3.min.js"></script>

在我的HTML中（这显然不是很好的解决方案）。

为了以防万一，我在 github 上推送了这个项目：https://github.com/jehaby/ireact/tree/master/kindle

所以我的问题是为什么我会收到此错误以及如何以正确的方式解决它（我确定有一些错误）？我相信这可能是愚蠢的问题，但我是这个工具的新手。我已经花了几个小时试图找出问题所在，现在感觉有点卡住了。将非常感谢任何帮助。

Answer 1

对于 browserify 和 babelify，你应该在每个文件中声明你的依赖项：

//node's style
var React = require('react')
// ES 2015 modules
import React from 'react';

查看可用示例，了解如何使用 ES2015 模块和 React：

https://github.com/lukehoban/es6features#modules

https://github.com/erikras/react-redux-universal-hot-example/blob/master/src%2Fcomponents%2FCounterButton.js

Answer 2

定义

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 对象在其他脚本中是不可见的，但是 React=require('react') 定义了一个全局值。