watchify和browserify
来源:互联网 发布:广东动易软件 编辑:程序博客网 时间:2024/06/04 18:57
当开始一个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
文件。
但如果我写的是这样呢:
javascript
var 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
即可。
0 0
- watchify和browserify
- browserify和webpack
- Webpack、Browserify和Gulp
- Browserify
- browserify
- browserify
- Browserify
- gulp/grunt和browserify/webpack的区别
- ES6-Babel和Browserify使用教程
- gulp/grunt和browserify/webpack说明
- 使用 browserify 创建 node服务端和前端共通的js
- Gulp,grunt,seajs/require和browserify/webpack的区别?
- Javascript模块加载捆绑器Browserify Webpack和SystemJS用法
- grunt-browserify
- reactjs、Browserify
- browserify 使用
- browserify总结
- browserify初识
- 寒假自主学习项目一 - 链表(2、查找)
- C++读写txt文件
- eclipse 最佳配置
- 多线程之Executor框架
- bzoj 1079 题解
- watchify和browserify
- Android开发中在一个Activity中关闭另一个Activity
- python xlrd 使用
- Web App的零框架解决方案
- 好记性不如烂笔头26-JAVA处理文件事务(4)
- const的用法,特别是用在函数前面与后面的区别!
- webstorm、phpstorm、idea等使用技巧记录
- IOS学习 App Store审核指南中文版
- Ubuntu 下设置IP配置