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(`############################################################################`);

項目地址