ReactFire未定义

Question

我正在关注构建React Web应用程序的在线教程。

我有以下JSX文件，我使用gulp转换为JS并在HTML页面上作为脚本运行：

var React = require('react');
var Firebase = require('firebase');
var ReactFire = require('reactfire');
var rootUrl = 'https://blinding-torch-7006.firebaseio.com/';

var TreeNode = React.createClass({
    mixins: [ ReactFire ],
    componentWillMount: function() {
      this.bindAsObject(new Firebase(rootUrl + 'items/'), 'items');
    },
    render: function() {
        console.log(this.state);

        return <h1> Hello, React! </h1>
    }
});

不幸的是，我收到以下错误：

Uncaught ReferenceError: ReactFire is not defined

我已将ReactFire添加到我的package.json文件中，如下所示："reactfire": "0.5.0"

我的gulpfile看起来像这样：

var gulp = require('gulp');
var gutil = require('gulp-util');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var watchify = require('watchify');
var reactify = require('reactify');
var notifier = require('node-notifier');
var server = require('gulp-server-livereload');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var watch = require('gulp-watch');

var notify = function(error) {
    var message = 'In: ';
    var title = 'Error: ';

    if(error.description) {
        title += error.description;
    } else if (error.message) {
        title += error.message;
    }

    if(error.filename) {
        var file = error.filename.split('/');
        message += file[file.length-1];
    }

    if(error.lineNumber) {
        message += '\nOn Line: ' + error.lineNumber;
    }

    notifier.notify({title: title, message: message});
};

var bundler = watchify(browserify({
    entries: ['./src/app.jsx'],
    transform: [reactify],
    extensions: ['.jsx'],
    debug: true,
    cache: {},
    packageCache: {},
    fullPaths: true
}));

function bundle() {
    return bundler
        .bundle()
        .on('error', notify)
        .pipe(source('main.js'))
        .pipe(gulp.dest('./'))
}
bundler.on('update', bundle)

gulp.task('build', function() {
    bundle()
});

gulp.task('serve', function(done) {
    gulp.src('')
        .pipe(server({
            livereload: {
                enable: true,
                filter: function(filePath, cb) {
                    if(/main.js/.test(filePath)) {
                        cb(true)
                    } else if(/style.css/.test(filePath)){
                        cb(true)
                    }
                }
            },
            open: true
        }));
});

gulp.task('sass', function () {
    gulp.src('./sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(concat('style.css'))
        .pipe(gulp.dest('./'));
});

gulp.task('default', ['build', 'serve', 'sass', 'watch']);

gulp.task('watch', function () {
    gulp.watch('./sass/**/*.scss', ['sass']);
});

为什么会这样？