使用browserify打包React组件

时间:2015-11-19 22:35:07

标签: javascript reactjs gulp browserify

我正在尝试使用browserify来管理我的javascript。 我的第一个简单任务是创建一个将由gulp + browserify

生成的react.js文件
var browserify = require('gulp-browserify');

gulp.task('browserify-react', function () {
  return gulp.src('js/react/react.js')
  .pipe(browserify())
  .pipe(rename('react-generated.js'))
  .pipe(gulp.dest('./dist'));
});

在js / react /中我创建了一个文件react.js,这只是两个需要命令:

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

我希望新文件react-generated.js能够满足反应和反应模块。

将生成文件,但是当我尝试在我的项目中使用此react-generated.js时,我得到两个错误

ReferenceError: React is not defined
ReferenceError: ReactDOM is not defined

但如果我使用来自facebook的反应javascript,那么一切正常,没有错误

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

问题。当我使用gulp-browserify生成反应组件时,我会错过什么?

1 个答案:

答案 0 :(得分:2)

您的react.js文件/模块未公开您实例化的变量ReactReactDOM。在节点中,您可以通过修改module.exports对象来公开这些方法,如下所示:

module.exports = {
  React: React,
  ReactDOM: ReactDOM
}