React jsx 拆分与build
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
</head>
<body>
<div id="example"></div>
</body>
<script type="text/javascript" src="bundle.js"></script>
</html>
/js/components/Child.jsx
var Child = React.createClass({
render: function(){
return (
<div> The Child </div>
)
}
});
module.exports = Child;
/js/components/Parent.jsx
var Child = require('./Child.jsx');
var Parent = React.createClass({
render: function(){
return (
<div>
<div> Hello World </div>
<Child/>
</div>
)
}
});
module.exports = Parent;
/js/app.js
var Parent = require('./components/Parent.jsx');
React.render(<Parent />, 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这个文件，我们直接用浏览器打开之后，就可以看到运行效果了
