typescript+react+antd基礎環境搭建

typescript+react+antd基礎環境搭建（包含樣式定製）

• tsconfig.json 配置

// 具體配置能夠看上面的連接 這裏module moduleResolution的配置都會影響到antd的顯示
// allowSyntheticDefaultImports  是antd官網給的配置 必須加上
{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": false,
        "noImplicitAny": false,
        "module": "es6",
        "target": "es5",
        "jsx": "preserve",
        "moduleResolution": "node",
        "forceConsistentCasingInFileNames": false,
        "allowJs": true,
        "allowSyntheticDefaultImports": true,
        "lib": [
            "es5", 
            "dom",
            "dom.iterable",
            "es2015"
        ]
    },
    "include": [
        "./src/**/*"
    ]
}

• package.json 配置

// 其中不少配置是用來作antd樣式定製的
// concurrently 是用來將命令鏈接起來執行的 Run multiple commands concurrently
{
  "name": "power3",
  "version": "1.0.0",
  "description": "typescript && react for power3",
  "main": "index.js",
  "scripts": {
    "build": "webpack --progress --colors",
    "start": "concurrently \"node ./server/server.js\" \" npm run dev \"",
    "dev": "webpack-dev-server --progress --colors -p -d"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "antd": "^2.13.6",
    "css-loader": "^0.28.7",
    "immutable": "^3.8.2",
    "md5": "^2.2.1",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-hot-loader": "^3.1.1",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2"
  },
  "devDependencies": {
    "@types/node": "^8.0.34",
    "@types/react": "^16.0.10",
    "@types/react-dom": "^16.0.1",
    "@types/react-router": "^4.0.15",
    "@types/react-router-dom": "^4.0.8",
    "awesome-typescript-loader": "^3.2.3",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-import": "^1.6.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "concurrently": "^3.4.0",
    "extract-text-webpack-plugin": "^2.1.0",
    "html-webpack-plugin": "^2.30.1",
    "less": "^2.7.2",
    "less-loader": "^4.0.5",
    "less-vars-to-js": "^1.2.0",
    "source-map-loader": "^0.2.2",
    "style-loader": "^0.19.0",
    "typescript": "^2.5.3",
    "url-loader": "^0.5.8",
    "webpack": "^2.3.3",
    "webpack-dev-server": "^2.4.2",
    "webpack-hot-middleware": "^2.20.0"
  }
}

• routes.tsx頁面

該頁面主要用來配置路由 指定登陸頁面
推薦使用react-router-dom 裏面的各類接口直接繼承感受很方便

/**
 * 路由寫到此處 頁面通常會有層級關係 此處json對象是按照業務寫成層級關係
 * 第一種作法是 處理成 平級的路由
 * 第二種是 根據業務的層級關係渲染出符合業務的相應導航
 * 此處兩種都導出 而後在index.tsx中能夠兩種都試一下
 */

import {RouteProps} from 'react-router-dom'

import Apple from './components/fruits/Apple'
import Banana from './components/fruits/banana'

import Cabbage from './components/vegetables/cabbage'
import Radish from './components/vegetables/radish'

interface PowerRouteProps extends RouteProps{
    name:string;
}

export const _routes=[
    {
        id:'fruits',
        name:'水果',
        routes:[
            {
                name:'蘋果',
                path:'/apple',
                component:Apple
            },
            {
                name:'香蕉',
                path:'/banana',
                component:Banana
            }
        ]
    },
    {
        id:'vegetables',
        name:'蔬菜',
        routes:[
            {
                name:'白菜',
                path:'/cabbage',
                component:Cabbage
            },
            {
                name:'蘿蔔',
                path:'/radish',
                component:Radish
            }
        ]
    }
];
// 此處變量我以前使用 routes 命名 結果在index.tsx引入時(import {routes} from './routes') 直接報錯
// 注意導出變量名和文件名不能同樣
export const maproutes = _routes.reduce((ary:PowerRouteProps[],cur:any)=>{
    return ary.concat(cur.routes||cur)
},[]).filter(x=>x.path && x.path!=='');

• 簡單的業務組件(只爲了說明)

其餘的組件能夠在github上看

// ./components/vegetables/cabbage 

import * as React from 'react'

export default class Cabbage extends React.Component{
    render(){
        return (<p>You need to eat cabbage</p>)
    }
}

• 入口文件index.tsx

此處寫了兩種導航 一種有submenu 一種是使用plain數據直接將全部路由列出

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import {HashRouter, Route, Switch, Link, BrowserRouter} from 'react-router-dom'
// 提供antd的本地語言支持
import {LocaleProvider, Menu} from 'antd'
const MenuItem = Menu.Item;
const SubMenu = Menu.SubMenu;

import {maproutes,_routes} from './routes'
// plain 路由
class Navigation extends React.Component {
    render() {
        return (
            <Menu>
                {maproutes.map(route => {
                    return (
                        <MenuItem key={route.path}>
                            <Link to={route.path} key={`route-link-${route.path}`}>{route.name}</Link>
                        </MenuItem>
                    )
                })}
            </Menu>
        )
    }
}
// 有層級關係的路由
class Navigations extends React.Component {
    render() {
        return (
            <Menu style={{width:200}} mode="inline">
                {_routes.map(routes=>{
                    return (
                    <SubMenu key={routes.id} title={routes.name}>
                        {routes.routes.map(route=>{
                            return (
                                <MenuItem key={`route-${route.path}`}>
                                    <Link to={route.path} key={`route-link-${route.path}`}>{route.name}</Link>
                                </MenuItem>
                            )
                        })}
                    </SubMenu>)
                })}
            </Menu>
        )
    }
}

class NotFoundView extends React.Component {
    render() {
        return (
            <div className="http-404">
                <h2 className="text-info">功能還沒有開發完畢</h2>
                <h3 className="text-danger">Page not found</h3>
            </div>
        );
    }
}

const Router = () => (
    <BrowserRouter>
        <Switch>
            {maproutes.map(route => {
                // return <Route path={route.path} key={`route-path-${route.path}`} location={route.location} component={route.component}/>
                return <Route path={route.path} key={`route-${route.path}`} component={route.component}/>
            })}
            <Route path="/" exact component={Navigations}/>
            <Route component={NotFoundView}/>
        </Switch>
    </BrowserRouter>
)

ReactDOM.render(
    <Router/>, document.getElementById('app'));

• 樣式定製（使用社區提供的方法）

建立.babelrc文件
在終端(ctrl+`)中輸入 type null>.babelrc

.babelrc文件

plugins的配置是爲了讓antd的樣式生效

{
    "presets": [
      ["env"],
      "stage-0",
      "react"
    ],
    "plugins": [
        "react-hot-loader/babel",
        ["import", { "libraryName": "antd","style": true}]
    ]
  }

• 最後一步 webpack.config.js文件編寫

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const fs = require('fs');
const lessToJs = require('less-vars-to-js');

// 獲取本身定義的要覆蓋antd默認樣式的文件
const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, './src/assets/style/themes.less'), 'utf8'));

module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: "cheap-moudle-source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx", ".js", ".json"]
    },
    devServer: {
        port: 8003,
        hot: true,
        // historyApiFallback: true,
        historyApiFallback: {
            index: '/react.min.js'
        },
        contentBase: path.resolve(__dirname, 'dist'),
        publicPath: '/'
    },
    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by
            // 'awesome-typescript-loader'.
            {
                test: /\.(tsx|ts)?$/,
                use: [
                    {
                        loader: 'react-hot-loader/webpack'
                    }, {
                        loader: 'babel-loader'
                    }, {
                        loader: 'awesome-typescript-loader'
                    }
                ]
            },

            // All output '.js' files will have any sourcemaps re-processed by
            // 'source-map-loader'.
            {
                enforce: "pre",
                test: /\.js$/,
                loader: "babel-loader",
                exclude: /node_modules/
            }, {
                test: /\.less$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }, {
                        loader: "less-loader",
                        options: {
                            modifyVars: themeVariables
                        }
                    }
                ]
            }, {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader', publicPath: '/'})
            }, {
                test: /\.(png|jpg|jpeg|gif|svg)$/,
                loader: 'url-loader?limit=8192&name=[name].[ext]&publicPath='
            }
        ]
    },
    // When importing a module whose path matches one of the following, just assume
    // a corresponding global variable exists and use that instead. This is
    // important because it allows us to avoid bundling all of our dependencies,
    // which allows browsers to cache those libraries between builds.
    externals: {
        // "react": "React",
        // "react-dom": "ReactDOM"
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            title: 'hello ts&react',
            inject: false,
            minify: {
                removeComments: true,
                collapseWhitespace: true
            },
            chunksSortMode: 'dependency'
        }),
        new ExtractTextPlugin({filename: '[name].css', allChunks: true}),
        new webpack.HotModuleReplacementPlugin()
    ]
};

// 此處是借鑑同事的 啊哈哈哈
const os = require('os');
console.log(`############################################################################`);
console.log(`##         os: ${os.type()} ${os.arch()} ${os.release()}`);
console.log(`##        ram: ${ (os.freemem() / 1024 / 1024 / 1024) < 1
    ? (os.freemem() / 1024 / 1024).toFixed(0) + 'MB'
    : (os.freemem() / 1024 / 1024 / 1024).toFixed(2) + 'GB'}`);
console.log(`##       time: ${new Date()}`);
console.log(`############################################################################`);

項目地址

來源：https://segmentfault.com/a/1190000011721098