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 是任務(wù)運(yùn)行環(huán)境秸脱，用來進(jìn)行任務(wù)調(diào)度
var gulp = require("gulp");
// browserify 用來 require js 的模塊
var browserify = require("browserify");
// JSX 編譯
var babelify = require("reactify");
// vinyl-source-stream 把 browserify 輸出的數(shù)據(jù)進(jìn)行準(zhǔn)換揖膜，使之流符合 gulp 的標(biāo)準(zhǔn)
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'));
});
相關(guān)流程
來解釋一下上面的腳本流程暑刃。首先就是把入口文件 app.js 交給 browserify 進(jìn)行處理唉堪，
對于 jsx 的編譯，我們這里使用 babelify 來實(shí)現(xiàn)命黔，Gulp 官方的方案 使用的是 reactify ,
當(dāng)然也是可以的件豌。下一步，運(yùn)行 bundle()來把所有依賴都打包成 bundle.js .
但是注意喷斋，browserify 不是一個(gè)專門為 gulp 寫的包唁毒，所有它輸出的數(shù)據(jù)流并不能直接 pipe 給 gulp 使用，
所以星爪，需要用到 source()接口浆西，也就是 vinyl-source-stream 這個(gè)工具來處理一下，
然后 pipe 給 gulp 顽腾，gulp.dest 會把輸出的 bundle.js 文件保存到 js 文件夾中近零。
任務(wù)寫好了，在命令行執(zhí)行：
博客中說道使用babelify對jsx經(jīng)行編譯， 但是我嘗試的時(shí)候出現(xiàn)了語法錯(cuò)誤久信，但還不知道是為什么,所以將babelify改成了reactify窖杀，還是可以運(yùn)行成功的
運(yùn)行程序
首先導(dǎo)入相關(guān)依賴
npm install --save-dev gulp browserify vinyl-source-stream reactify
react react-dom
現(xiàn)在我們就可以運(yùn)行腳本
gulp browserify
這樣就生成了 js/bundle.js這個(gè)文件，我們直接用瀏覽器打開之后入篮，就可以看到運(yùn)行效果了
