1、使用browserify管理react
在永不过时的Hello world中我们介绍了一些创建工具，可我们在那一节并没有使用任何的创建工具，只是简单的使用最原始的办法来编写React,基本上代码都在Html当中编写，这一节中我们介绍browserify来管理js代码
(1)、什么是browserify
Browserify 可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码，通过预编译让前端 Javascript 可以直接使用 Node NPM 安装的一些库
(2)、browserify的安装
在我们使用npm来安装
npm install -g browserify复制代码
note:具体的方式我们可以参考
2、创建项目
1、第一步，我们创建一个props的文件夹
2、cd到props中执行npm init
在执行npm init过程中如果不知道package.json中要输入什么，就直接一路回车健就好了。
这样会在props文件夹中创建一个package.json文件，此我们就可以使用npm来管理此项目了。
3、安装react react-dom bable等
npm install --save react react-dom babel-preset-react babel-loader babel-core复制代码
bable作用就是把jsx转化成javascript的
4、在props目录中新建.babelrc文件(一定要记得，否则不会转化jsx)，在其中输入
{ "presets": ["react"] }复制代码 5、新建一个index.html
Hello React! 复制代码
至于bundle.js是什么我们暂时不用管，后面会说到
6、新建一个index.js
var React = require('react');var ReactDOM = require('react-dom');ReactDOM.render( Hello, world!
, document.getElementById('example'));复制代码 7、将index.js转化成bundle.js
browserify -t [ babelify ] index.js -o bundle.js复制代码
上面index.html中引用的bundle.js就是这样来的
此处注意，如果没有进行第4步，那么转化会出现以下问题,不能转化jsx语法
8、如果以上执行成功，那么就会在props目录中看到bundle.js文件
我们大概看看bundle.js文件吧
我们看到budle里面就是把JSX语法转化成标准的React语法了
到此我们就完成了browserify使用，还是非常容易的，我们不用在html引入react react-dom等js，我们通过npm下载到本地了，直接require进来就好
3、解放你手动转化bundle.js
虽然我们使用browserify管理了js但是有一个问题不知道大家有没有考虑到，就是每次我改变一下index.js都要执行转化成bundle.js语句，这样是不是太麻烦了，做为一个有思想的程序员，这也太扯了，那么能不能我改变一下index.js就自动执行转化语句呢，答案是肯定的我们需要安装一个三方类库watchify(其实就是把browserify封装了一把)
我们全局安装
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的语法转化成普通的js
"browserify" : { "transform": [ ["reactify", { "es6": true}] ]}复制代码 完成以上步骤以后，我们在命令行输入
watchify index.js -o bundle.js复制代码
不管我们杂样改变改变index.js都会自动转化成bundle.js,此时我们要需要刷新页面即可看到效果(我们也可以解放F5/commod+R，以后再说)
我们来看看结果
这一节我们介绍了使用browserify来管理js,到此结束