javascript - gulp + browserify + reactjs，未捕获的 ReferenceError : React is not defined

Question

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

我的 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