一个可用于生产环境的开发框架的搭建

[hsipeng]

gitRepo: ➡️

环境

• mac
• React 15.5.4
• react-router v4
• webpack 3.5.5
• typescirpt
• ..

生产需求

一个可以用于线上环境构成要素有：

• 可靠的编码环境
• 可靠和发展良好的语言
• 模块化，包括js 和 css 都要模块化
• 强类型，方便类型检测和推断
• 强大的构建工具
• 路由层面按需加载
• 统一的api 请求处理
• …

初步结论

• Mac 或者linux 对编程语言良好支持的操作系统
• javascript 或者 ES6(ES7) 基本语言
• 而强类型需要引入 typescript
• 同时需要通过 webpack 和其第三方插件支持一些 css 模块化和按模块打包按需加载
• axios 统一封装 api 请求，后期可以更换 fetch 等 异步请求
• …

所以下面我们来示范一个组件的写法

import React, {Component} from 'react'
import PropTypes from 'prop-type'
import ReactDom from 'react-dom'
import EventEmitter from 'events'
import classnames from 'classnames'
import Cssmodule from 'react-css-module'
import {Seq} from 'immutable'
import {immutableRenderDecorator} from 'react-immutable-render'
import {motion, spring} from 'react-motion' //动画特效
import Styles from './app.scss' // css 模块化



@immutableRenderDecorator // Decorator 
@Cssmodules(styles, {allowMutiple: true}) // 模块化
Class TabPane extends Component {
	static PropTypes = {
		tab: Proptypes.oneOfType([
			Propstypes.string,
			Propstypes.node
		]).isRequired,
		order: PropTypes.string.isRequired,
		disable: PropTypes.boolean,
		isActive: PropTypes.boolen
	}

	render() {
		const {className, isActive,children} = this.props;
		const classes = classnames({
						panel: true,
						contentActive: isActive,
					});
	return(
		<div
			role="tabpanel"
			styleName={classes}
 			aria-hidden={!isActive}>
		{children}
		</div>
	)
	}
}