typescript+react+antd基礎環境搭建
阿新 • • 發佈：2018-12-22
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