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变量时，我收到错误：

未捕获的ReferenceError：未定义React

我可以通过包含

来摆脱这种情况

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');

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（＆＃39; react＆＃39;），则从其他脚本看不到对象React，但是React = require（＆＃39; react＆＃39;）定义了全球价值。

gulp + browserify + reactjs，Uncaught ReferenceError：未定义React

2 个答案: