gulp + browserify + reactjs, Uncaught ReferenceError: React没

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

本文关键字：React ReferenceError browserify reactjs gulp Uncaught      更新时间：2023-09-26

我试图遵循这个文件中建议的工作流程: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');

在我的每个js文件中使用react，或者包含

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

在我的HTML(这显然不是很好的解决方案)。

以防万一，我把这个项目放在github上:https://github.com/jehaby/ireact/tree/master/kindle

所以我的问题是为什么我得到这个错误，以及如何解决它的正确方式(我敢肯定有一些)?我相信这可能是愚蠢的问题，但我是这个工具的新手。我已经花了好几个小时想弄清楚出了什么问题，现在感觉有点卡住了。我将非常感激任何帮助。

使用browserify和babelify，你应该在每个文件中声明你的依赖项:

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

看看如何使用ES2015模块和React的可用示例:

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

定义

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

相关文章：