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

【问题标题】：gulp + browserify + reactjs, Uncaught ReferenceError: React is not definedgulp + browserify + reactjs, Uncaught ReferenceError: React is not defined
【发布时间】：2015-08-06 08:03:48
【问题描述】：

我正在尝试遵循此文件中建议的工作流程：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

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

【问题讨论】：

标签： javascript reactjs gulp browserify

【解决方案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

【讨论】：

【解决方案2】：

定义

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

App.js 中的那些全局 javascript 值，而不是放这个

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') 定义了一个全局值。

【讨论】：