1、使用browserify管理react
在永不過時的Hello world中我們介紹了一些創(chuàng)建工具箩做，可我們在那一節(jié)并沒有使用任何的創(chuàng)建工具，只是簡單的使用最原始的辦法來編寫React,基本上代碼都在Html當(dāng)中編寫妥畏，這一節(jié)中我們介紹browserify來管理js代碼
(1)邦邦、什么是browserify
Browserify 可以讓你使用類似于 node 的 require() 的方式來組織瀏覽器端的 Javascript 代碼，通過預(yù)編譯讓前端 Javascript 可以直接使用 Node NPM 安裝的一些庫
(2)醉蚁、browserify的安裝
在我們使用npm來安裝
npm install -g browserify
note:具體的方式我們可以參考官網(wǎng)
2燃辖、創(chuàng)建項目
1、第一步馍管，我們創(chuàng)建一個props的文件夾
2郭赐、cd到props中執(zhí)行npm init
在執(zhí)行npm init過程中如果不知道package.json中要輸入什么，就直接一路回車健就好了确沸。
這樣會在props文件夾中創(chuàng)建一個package.json文件捌锭，此我們就可以使用npm來管理此項目了。
3罗捎、安裝react react-dom bable等
npm install --save react react-dom babel-preset-react babel-loader babel-core
bable作用就是把jsx轉(zhuǎn)化成javascript的
4观谦、在props目錄中新建.babelrc文件(一定要記得，否則不會轉(zhuǎn)化jsx)桨菜，在其中輸入
{ "presets": ["react"] }
5豁状、新建一個index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
</head>
<body>
<div id="example"></div>
<script src="bundle.js"></script>
</body>
</html>
至于bundle.js是什么我們暫時不用管，后面會說到
6倒得、新建一個index.js
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
7泻红、將index.js轉(zhuǎn)化成bundle.js
browserify -t [ babelify ] index.js -o bundle.js
上面index.html中引用的bundle.js就是這樣來的
此處注意，如果沒有進行第4步霞掺，那么轉(zhuǎn)化會出現(xiàn)以下問題,不能轉(zhuǎn)化jsx語法
8谊路、如果以上執(zhí)行成功，那么就會在props目錄中看到bundle.js文件
我們大概看看bundle.js文件吧
我們看到budle里面就是把JSX語法轉(zhuǎn)化成標(biāo)準的React語法了
到此我們就完成了browserify使用菩彬，還是非常容易的缠劝，我們不用在html引入react react-dom等js潮梯，我們通過npm下載到本地了，直接require進來就好
3惨恭、解放你手動轉(zhuǎn)化bundle.js
雖然我們使用browserify管理了js但是有一個問題不知道大家有沒有考慮到秉馏，就是每次我改變一下index.js都要執(zhí)行轉(zhuǎn)化成bundle.js語句，這樣是不是太麻煩了脱羡，做為一個有思想的程序員萝究，這也太扯了，那么能不能我改變一下index.js就自動執(zhí)行轉(zhuǎn)化語句呢轻黑，答案是肯定的我們需要安裝一個三方類庫watchify(其實就是把browserify封裝了一把)
我們?nèi)职惭b
npm install -g watchify
那么如何使用呢和browserify一樣直接使用
watchify index.js -o bundle.js
我們在命令行中輸入以上命令會有問題糊肤，我們還需要以下步驟
1、要安裝reactify氓鄙，
npm install --save reactify
2馆揉、package.json在其中加上
"browserify" : {
"transform": [
["reactify"]
]
}
如果你使用的是ES6的語法，只需要在只需要在reactify的配置中加上{"es6": true}即可將ES6的語法轉(zhuǎn)化成普通的js
"browserify" : {
"transform": [
["reactify", {"es6": true}]
]
}
完成以上步驟以后抖拦，我們在命令行輸入
watchify index.js -o bundle.js
不管我們雜樣改變改變index.js都會自動轉(zhuǎn)化成bundle.js,此時我們要需要刷新頁面即可看到效果(我們也可以解放F5/commod+R升酣，以后再說)
我們來看看結(jié)果
這一節(jié)我們介紹了使用browserify來管理js,到此結(jié)束
