使用browserify来打包React组件 [英] Use of browserify to pack React components

问题描述

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

$ p $ 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-generated.js将会包含一个react和react-dom模块。

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

  ReferenceError：未定义React 
 ReferenceError：未定义ReactDOM 
  

但是，如果我使用来自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生成反应组件时，我会错过什么？ 您的react.js文件/模块不是' t公开您实例化的变量 React 和 ReactDOM 。在节点中，通过修改 module.exports 对象来公开这些方法：

  module.exports = {
 React：React，
 ReactDOM：ReactDOM 
} 
  

I am trying to learn browserify to manage my javascript. My first simple task is to create a react.js file which will be generated by 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'));
});

In js/react/ I created a file react.js which is just two require commands:

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

I expect that a new file react-generated.js will content a react and react-dom modules.

File will be generated, but when I try to use this react-generated.js in my project I get two errors

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

But if I use react javascript from facebook, so everything is ok, no errors

<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>

Questions. What do I miss when I generate react components by using of gulp-browserify?

解决方案

Your react.js file/module isn't exposing the variables React and ReactDOM you instantiate. In node, you make these methods public by modifying the module.exports object like so:

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

这篇关于使用browserify来打包React组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！