browserify，reactify使用

当开始一个React项目的时候，首要的烦人问题就是，编译。似乎考虑到编译就得去学Grunt脚本，就得去写gulp。虽然会写gulp脚本，但仍然觉得这些事情很没必要也很耗时，而且这种脚本的特点是难以debug，相当费时。是否稍做配置就可以完全编译呢？答案是可以的。

首先安装browserify，reactify，然后在packages.json中加上：

"browserify":{"transform":[
["reactify"]
]
}

然后写一个文件，如x.js:

varx=(<divclassName="hello"></div>);

在命令执行：browserify x.js 便会得到：

(functione(t,n,r){functions(o,u){if(!n[o]){if(!t[o]){vara=typeofrequire=="function"&&require;if(!u&&a)returna(o,!0);if(i)returni(o,!0);varf=newError("Cannotfindmodule'"+o+"'");throwf.code="MODULE_NOT_FOUND",f}varl=n[o]={exports:{}};t[o][0].call(l.exports,function(e){varn=t[o][1][e];returns(n?n:e)},l,l.exports,e,t,r)}returnn[o].exports}vari=typeofrequire=="function"&&require;for(varo=0;o<r.length;o++)s(r[o]);returns})({1:[function(require,module,exports){varx=React.createElement("div",{className:"hello"},"")

},{}]},{},[1]);

可以看出来，<div className="hello" ...已经被编译成了React.createElement("div",{className: "hello"}," ").

执行browserify x.js -o x.out.js便会将结果输出到x.out.js文件。

但如果我写的是这样呢：

varH=React.reactClass({
getData(){return[20,30];
},render(){
[width,height]=this.getData();return(<divstyle={{width:width,height:height,backgroundColor:'blue'}}>
<span{...this.props}>hello</span>
</div>
);
}
});

console.log(
React.renderToString(<HclassName="xyz"/>)
);

上述有es6的语法，正常js引擎是不能正常执行的，那如何让它被正确转换成通用的JS呢？
只需要在reactify的配置中加上{"es6": true}即可。

"browserify":{"transform":[
["reactify",{"es6":true}]
]
}

那最后问题来了，如何让文件每次变动都编译呢?
答案是安装watchify。
watchify是一个browserify的封装，其在packages.json中的配置与browserify完全一样，且无需改变"browserify"字段名。
因此，安装了watchify后，你甚至不用修改browserify已有的配置，直接执行watchify x.js -o x.out.js即可。