typescript+react+antd基础环境搭建

小编 2026-06-17 阅读:470 评论:0

typescript+react+antd基础环境搭建（包含样式定制） tsconfig.json 配置 // 具体配置可以看上面的链接这里module moduleResolutio...

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 &amp;&amp; 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)=&gt;{
    return ary.concat(cur.routes||cur)
},[]).filter(x=&gt;x.path &amp;&amp; x.path!==\'\');

简单的业务组件(只为了说明)

其他的组件可以在github上看


// ./components/vegetables/cabbage 

import * as React from \'react\'

export default class Cabbage extends React.Component{
    render(){
        return (&lt;p&gt;You need to eat cabbage&lt;/p&gt;)
    }
}

入口文件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 (
            &lt;Menu&gt;
                {maproutes.map(route =&gt; {
                    return (
                        &lt;MenuItem key={route.path}&gt;
                            &lt;Link to={route.path} key={`route-link-${route.path}`}&gt;{route.name}&lt;/Link&gt;
                        &lt;/MenuItem&gt;
                    )
                })}
            &lt;/Menu&gt;
        )
    }
}
// 有层级关系的路由
class Navigations extends React.Component {
    render() {
        return (
            &lt;Menu style={{width:200}} mode=\"inline\"&gt;
                {_routes.map(routes=&gt;{
                    return (
                    &lt;SubMenu key={routes.id} title={routes.name}&gt;
                        {routes.routes.map(route=&gt;{
                            return (
                                &lt;MenuItem key={`route-${route.path}`}&gt;
                                    &lt;Link to={route.path} key={`route-link-${route.path}`}&gt;{route.name}&lt;/Link&gt;
                                &lt;/MenuItem&gt;
                            )
                        })}
                    &lt;/SubMenu&gt;)
                })}
            &lt;/Menu&gt;
        )
    }
}

class NotFoundView extends React.Component {
    render() {
        return (
            &lt;div className=\"http-404\"&gt;
                &lt;h2 className=\"text-info\"&gt;功能尚未开发完毕&lt;/h2&gt;
                &lt;h3 className=\"text-danger\"&gt;Page not found&lt;/h3&gt;
            &lt;/div&gt;
        );
    }
}

const Router = () =&gt; (
    &lt;BrowserRouter&gt;
        &lt;Switch&gt;
            {maproutes.map(route =&gt; {
                // return &lt;Route path={route.path} key={`route-path-${route.path}`} location={route.location} component={route.component}/&gt;
                return &lt;Route path={route.path} key={`route-${route.path}`} component={route.component}/&gt;
            })}
            &lt;Route path=\"/\" exact component={Navigations}/&gt;
            &lt;Route component={NotFoundView}/&gt;
        &lt;/Switch&gt;
    &lt;/BrowserRouter&gt;
)

ReactDOM.render(
    &lt;Router/&gt;, 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&amp;name=[name].[ext]&amp;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&amp;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) &lt; 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