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,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]); 可以看出来, 执行 但如果我写的是这样呢: 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呢? javascript"browserify" : { "transform": [ ["reactify",{"es6": true}] ] } 那最后问题来了,如何让文件每次变动都编译呢? (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |