browserify,reactify使用

前端之家收集整理的这篇文章主要介绍了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即可。

原文链接:https://www.f2er.com/react/306296.html

猜你在找的React相关文章