watchify和browserify

當開始一個React項目的時候，首要的煩人問題就是，編譯。彷佛考慮到編譯就得去學Grunt腳本，就得去寫gulp。雖然會寫gulp腳本，但仍然以爲這些事情很不必也很耗時，並且這種腳本的特色是難以debug，至關費時。是否稍作配置就能夠徹底編譯呢？答案是能夠的。

首先安裝browserify，reactify，而後在packages.json中加上：

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

而後寫一個文件，如x.js:

var x = (<div className="hello"></div>);

在命令執行：browserify x.js 便會獲得：

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var x = React.createElement("div", {className: "hello"}, " ")

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

能夠看出來，<div className="hello" ...已經被編譯成了React.createElement("div", {className: "hello"}, " ").

執行browserify x.js -o x.out.js便會將結果輸出到x.out.js文件。

但若是我寫的是這樣呢：

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

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

上述有es6的語法，正常js引擎是不能正常執行的，那如何讓它被正確轉換成通用的JS呢？
只須要在reactify的配置中加上{"es6": true}便可。

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

那最後問題來了，如何讓文件每次變更都編譯呢?
答案是安裝watchify。
watchify是一個browserify的封裝，其在packages.json中的配置與browserify徹底同樣，且無需改變"browserify"字段名。
所以，安裝了watchify後，你甚至不用修改browserify已有的配置，直接執行watchify x.js -o x.out.js便可。