javascript - 使用browserify打包React组件

Question

我正在尝试学习 browserify 来管理我的 javascript。 我的第一个简单任务是创建一个react.js 文件，该文件将由 gulp + browserify 生成

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，它只是两个require命令:

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

我希望新文件react-generate.js将包含react和react-dom模块。

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

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

但是如果我使用 Facebook 的 React 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 生成 React 组件时，我错过了什么？

Answer 1

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

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