文档章节

做个小东西 require-any

曾建凯
 曾建凯
发布于 2016/04/29 22:13
字数 787
阅读 143
收藏 4

前两天,有个朋友跑来问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了。

© 著作权归作者所有

曾建凯

曾建凯

粉丝 335
博文 66
码字总数 104794
作品 0
广州
技术主管
私信 提问
深圳求一份c++实习

嗯,是代同学发的,因为一些原因来到了深圳,所以想在深圳找份和c++相关的实习学习锻炼下, 主要特长就是vc用的相对熟练些,也没做过啥大项目,就是平时自己写的一些小东西,大概有以下这些:...

i蛋炒饭
2012/07/16
418
2
想写个控制IE浏览器的东西,用什么语言容易开发?

目前用python的PAMIE 做了个小东西,觉得有时候容易出错, 还有什么好的见议吗?

江江小豆
2014/07/30
1K
11
最近在自学Android开发,感觉好累啊!!!

本来可以全自动安装配置的,因为被墙,结果变成全手动了 我只想做个自己需要的小东西,但这学习过程也太崎岖了

本源
2015/03/17
2K
13
建议把12306外包给阿里得了。。。

改点小东西,貌似又崩溃了。。我看,除了IBM能做的来,国内,可能也就阿里的能做了。阿里的业务量支撑的后面技术团队应该可以搞定。但是千万别给360,这可是306,比360高级很多呢。哈。...

中山野鬼
2012/09/16
3.2K
88
分享个自己弄的php框架 v0.0001版

最近整理做过的小东西,发现为学php曾短暂搞过个php框架。后面忙别的就没下文了,估计接下来也没什么精力搞,想想还是放出来晒晒吧,主要是思路的交流。 项目目录结构采用playframework的类似...

大东哥
2011/11/18
1K
11

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
昨天
7
0
用最通俗的方法讲spring [一] ──── AOP

@[TOC](用最通俗的方法讲spring [一] ──── AOP) 写这个系列的目的(可以跳过不看) 自己写这个系列的目的,是因为自己是个比较笨的人,我曾一度怀疑自己的智商不适合干编程这个行业.因为在我...

小贼贼子
昨天
7
0
Flutter系列之在 macOS 上安装和配置 Flutter 开发环境

本文为Flutter开发环境在macOS下安装全过程: 一、系统配置要求 想要安装并运行 Flutter,你的开发环境需要最低满足以下要求: 操作系统:macOS(64位) 磁盘空间:700 MB(不包含 IDE 或其余...

過愙
昨天
6
0
OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
昨天
2.5K
16
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
昨天
42
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部