为了折腾, 简朴的进修了下TypeScript, 觉得确切不错。 也为了不停进修, 防止落后, 所以就折腾不停。
前段时间用ES6,antd+dva写了一些demo, 发明antd运用TypeScript完成的,而且angular2也采用了TypeScript。 既然这么多项目都提早运用了TypeScript, 而我又是React的粉, 那末照样先研讨下TypeScript完成React组件。
鉴于刚最先, 照样站在他人的肩膀上最先吧。
东西挑选
本人对webpack设置略知一二,但临时还不想太深切到工程方面的研讨,所以,东西挑选开源的,有阿里运用的atool-build, roadhog. 尝试屡次, 鉴于之前的项目都是用的roadhog, 而且也看了roadhog git上面已说支撑TypeScript, 所以终究挑选了roadhog, 由于它设置确切简朴、费心。
不过要运用roadhog的0.6.0-beta2版本(由于之前的版本不支撑TypeScript):
npm install roadhog@0.6.0-beta2 --save-dev
设置文件:
//.roadhogrc
{
"entry": "src/index.js",
"publicPath": "/dist/",
"outputPath": "./dist",
"env": {
"development": {
"extraBabelPlugins": [
"dva-hmr",
"transform-runtime"
]
},
"production": {
"extraBabelPlugins": [
"transform-runtime",
["import", { "libraryName": "antd", "style": "css" }] // 到场这一条,import antd的款式的时刻才不会被md5
]
}
}
}
项目构造
+------- src
+----- components
+----- models
+----- routes
+------- .roadhog
+------- node_modules
+------- package.json
+------- ...
项目构造基础和antd-admin的构造保持一致。
进口文件
// index.js
import './index.html'
import 'babel-polyfill'
import dva, { connect } from 'dva'
import createLoading from 'dva-loading'
import { browserHistory, Router, Route } from 'dva/router'
/**
* @desc 以下是处理域名下面子目次布置题目
* 域名项目下面平常会有多个子项目,那末布置的时刻,子目次的作用就至关重要了。
* 不借助basename不太轻易完成。
*/
import { useRouterHistory } from 'dva/router'
import createBrowserHistory from 'history/lib/createBrowserHistory'
const history = useRouterHistory(createBrowserHistory)({basename: '/mda'})
// 1. Initialize
const app = dva({
...createLoading(),
// history: browserHistory,
history,
onError (error) {
console.error('app onError -- ', error)
},
})
// 2. Model
app.model(require('./models/app'))
// 3. Router
app.router(require('./router'))
// 4. Start
app.start('#root')
运用模块(src/routes/app.js)
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'dva'
import {
Icon,
Row,
Col,
Button,
Modal,
} from '../components'
import 'antd/dist/antd.css'
import styles from './app.less'
function App ({ children, location, dispatch, app, loading }) {
const {
isVisible,
} = app
const showModal = () => {
dispatch({
type: 'app/showModal',
})
}
const handleOk = () => {
}
const handleCancel = () => {
dispatch({
type: 'app/hideModal',
})
}
return (
<div className={styles.normal}>
<Row>This is a row</Row>
<Row>
<Col span={12}>这是一个Col</Col>
<Col span={12}>这是一个Col</Col>
</Row>
<Button type="primary" onClick={showModal}><Icon type="link" />弹窗</Button>
<Modal title="弹窗题目" visible={isVisible} onOk={handleOk} onCancel={handleCancel}>
<div>Hello</div>
</Modal>
</div>
)
}
App.propTypes = {
children: PropTypes.element.isRequired,
location: PropTypes.object,
dispatch: PropTypes.func,
app: PropTypes.object,
loading: PropTypes.bool,
}
export default connect(({ app, loading }) => ({ app, loading: loading.models.app }))(App)
组件
组件位于src/components, 最先进修的时刻,能够直接从ant-design源代码的components中拷贝代码过来, 关于简朴的组件Button, Grid, Icon, 能够拷贝过来, 然后直接跑起来, 不过注重装置必要的包。
基础依靠包
{
"@types/react": "^15.0.22",
"@types/react-dom": "^0.14.23",
"antd": "^2.9.1",
"classnames": "^2.2.5",
"dva": "^1.2.1",
"dva-loading": "^0.2.1",
"object-assign": "^4.1.1",
"omit.js": "^0.1.0",
"prop-types": "^15.5.8",
"rc-animate": "^2.3.6",
"rc-dialog": "^6.5.8",
"rc-util": "^4.0.2",
"react": "^15.5.4",
"react-dom": "^15.5.4"
}
总结
东西、项目搭建起来, 下面能够舒心的进修TypeScript开辟React组件了。 鉴于本人也是进修, 另有太多须要勤奋的。 愿望有志同砚一同进修讨论。
下面列举出一些坑:
roadhog貌似和dva关联起来了, 没有细致研讨,不做路由设置, 顺序跑不起来,权且先设置下简朴的路由,让运用跑起来吧。
须要装置@types/react, @types/react-dom, 虽然临时还不太邃晓详细道理。
须要在根目次设置tsconfig.json, 不然跑不起来
typings目次临时没有用到,待进修
在迁徙modal模块时, 总是报错, 末了处理方案在处理modal onClose赋值报错的题目
以下是相干敕令
开辟: npm run server
构建: npm run build