摘要：為了折騰，簡單的學習了下感覺確實不錯。也為了不斷學習，避免落伍，所以就折騰不斷。既然這么多項目都提前使用了而我又是的粉，那么還是先研究下實現組件。鑒于本人也是學習，還有太多需要努力的。希望有志同學一起學習探討。

為了折騰， 簡單的學習了下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")

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 (
    

      This is a row
      
        這是一個Col
        這是一個Col
      
      彈窗
      
        
Hello
      
    
  )
}

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

https://github.com/walkerqiao...