React jsx 拆分与build

React jsx 拆分与build

参考 : http://www.jianshu.com/p/tY6UPN

index.html

/js/components/Child.jsx

var Child = React.createClass({
  render: function(){
    return (
      
 The Child 
    )
  }
});

module.exports = Child;

/js/components/Parent.jsx

var Child = require('./Child.jsx');

var Parent = React.createClass({
  render: function(){
    return (
      

        
 Hello World 
        
      
    )
  }
});

module.exports = Parent;

/js/app.js

var Parent = require('./components/Parent.jsx');

React.render(, document.getElementById('example'));

gulpfile.js

// gulp 是任务运行环境，用来进行任务调度
var gulp = require("gulp"); 
// browserify 用来 require js 的模块
var browserify = require("browserify");
// JSX 编译
var babelify = require("reactify");
// vinyl-source-stream 把 browserify 输出的数据进行准换，使之流符合 gulp 的标准
var source = require("vinyl-source-stream");

gulp.task('reactdemo', function(){
  return browserify('./js/app.js')
         .transform(babelify)
         .bundle()
         .pipe(source('../bundle.js'))
         .pipe(gulp.dest('js'));
});

相关流程

来解释一下上面的脚本流程。首先就是把入口文件 app.js 交给 browserify 进行处理，
对于 jsx 的编译，我们这里使用 babelify 来实现，Gulp 官方的方案 使用的是 reactify ,
当然也是可以的。下一步，运行 bundle()来把所有依赖都打包成 bundle.js .
但是注意，browserify 不是一个专门为 gulp 写的包，所有它输出的数据流并不能直接 pipe 给 gulp 使用，
所以，需要用到 source()接口，也就是 vinyl-source-stream 这个工具来处理一下，
然后 pipe 给 gulp ，gulp.dest 会把输出的 bundle.js 文件保存到 js 文件夹中。
任务写好了，在命令行执行：

博客中说道使用babelify对jsx经行编译， 但是我尝试的时候出现了语法错误，但还不知道是为什么,所以将babelify改成了reactify，还是可以运行成功的

运行程序

首先导入相关依赖

    npm install --save-dev gulp browserify vinyl-source-stream reactify 
    react react-dom

现在我们就可以运行脚本

gulp browserify

这样就生成了 js/bundle.js这个文件，我们直接用浏览器打开之后，就可以看到运行效果了