做个小东西 require-any

前两天，有个朋友跑来问React上手的问题。吧啦吧啦说了很多，但事后想了一下，其实React对于一般的前端来说，上手还是有些头疼的。

其中最头疼的就是开发环境的初始化。

毕竟React面向的是Web开发，所以，如果你想最快速能看到效果，无论如何都必须安装gulp等这些东西，才能将jsx转换为js文件，看到效果。

而对于我来说，要开发这个小东西的需求，来自实际React的环境。

gulp这个东西呢，如果你项目不大的话，用用无妨，但是超过上百个js，less（stylus）文件要watch的时候，gulp的表现就强差人意了。经常改了文件，去刷新页面，要刷好几次才能看到变化（实际上并不是浏览器缓存的问题，而是gulp要监控的文件太多），呃，我笔记本i7/16G内存/SSD，watch的效果实在不理想。

而且如果你用Jetbrain系的IDE，如webstorm，每次gulp翻译完文件，你的IDE都要重新索引一次，呃，真的受不了（其实我自己已经不再使用webstorm来写js了，转用了github的atom）。

其次，关于React的开发语言，javascript本身，还是太过臃肿和繁琐了，我试过好几种语言，typescript、coffeescript、ecmascript6（scala.js观望中），其中最理想的是coffeescript。但这还是会有问题，coffeescript或者typescript，一些语法特性（比如Class，或者函数的参数的...），实际上是通过翻译文件的时候，将这些方法直接输出在生成出来的js文件上的，这就让人很不舒服了，几乎每个文件头都有一堆函数。

开发环境，我只要实时加载源文件就好，出错异常，我就去改文件好了，到了发布环境，才用gulp编译。

好吧，所以开发了这个小工具： http://git.oschina.net/janpoem/require-any ，终于解脱了，gulp只要监控一下less、stylus好了，随时随地看效果。

晚上一个手痒，对切换了一个babel的转换器，转用了babel-standalone，目前版本已经彻底实现支持对将jsx转为任意umd、amd、commonjs的规范了，也即完全可以是一个如npm一般风格书写的js文件，转为一个有效的amd规范的js文件：

var React = require('react');

module.exports = React.createClass({
displayName: 'Test',
getInitialState: function() {
return {
count: 0
}
},
click: function(event) {
this.setState({ count: this.state.count + 1 });
},
render: function () {
return (
<button onClick={this.click}>
Test + {this.state.count}
</button>
);
}
});

转换为：

define(['module', 'react'], function (module, React) {
'use strict';

module.exports = React.createClass({
displayName: 'Test',
getInitialState: function getInitialState() {
return {
count: 0
};
},
click: function click(event) {
this.setState({ count: this.state.count + 1 });
},
render: function render() {
return React.createElement(
'button',
{ onClick: this.click },
'Test + ',
this.state.count
);
}
});
});

或者如es6中的import：

import hello from "any!./hello.coffee";

console.log(hello);

let fun = () => console.log('hello e2s6')

class Test {

}

module.exports = Test;

转换为：

define(["module", "any!./hello.coffee"], function (module, _hello) {
"use strict";

var _hello2 = _interopRequireDefault(_hello);

function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {
default: obj
};
}

function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}

console.log(_hello2.default);

var fun = function fun() {
return console.log('hello es6');
};

var Test = function Test() {
_classCallCheck(this, Test);
};

module.exports = Test;
});

有此利器，小伙伴们可以欢快的玩耍React和es6了。