本文會一步步配置一個React的TypeScript開發(fā)環(huán)境.使用TypeScript能夠很大程度上的提高開發(fā)效率,特別是當您排錯的時候...
本文涉及: TypeScript, Webpack, React, React-route, Webpack-dev-server
安裝Visual Studio Code
創(chuàng)建npm項目
$ npm init
安裝依賴
這里包括整個項目的依賴
npm i --save react react-dom react-router @types/react @types/react-dom @types/react-router
npm i --save-dev typescript awesome-typescript-loader source-map-loader
npm i --save-dev webpack
npm i --save-dev webpack-dev-server
npm link --save webpack webpack-dev-server
創(chuàng)建tsconfig.json
$ touch tsconfig.json
./tsconfig.json 中添加::
{
"compilerOptions": {
"outDir": "./build/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es5",
"jsx": "react"
},
"include": [
"./**/*"
],
"exclude": [
"node_modules"
]
}
創(chuàng)建webpack.config.js
$ touch webpack.config.js
./webpack.config.js 中添加:
const webpackConfig = {
entry: './app/main.tsx',
output: {
filename: "bundle.js",
path: __dirname + "/build",
publicPatch: __dirname + '/assets/'
},
devtool: "source-map",
devServer:{
inline: true,
hot: true,
},
resolve: {
extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
module: {
loaders: [
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" }
],
preLoaders: [
{ test: /\.js$/, loader: "source-map-loader" }
]
},
externals: {
"react": "React",
"react-dom": "ReactDOM"
},
}
module.exports = webpackConfig
修改package.json以webpack-dev-server啟動
設(shè)置-host=0.0.0.0指所有ip都可以訪問, 方便移動端測試開發(fā)
"web": "webpack-dev-server -d --host=0.0.0.0 --port=7000 --hot build/",
"watch": "webpack --watch"
到現(xiàn)在環(huán)境已經(jīng)搭建好了, 趕快創(chuàng)建一個組件測試一下
添加項目代碼測試
終端創(chuàng)建目錄:
mkdir build app
touch build/index.html app/main.tsx
./build/index.html 中添加:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, user-scalable=no'>
<title>Hello typescript</title>
</head>
<body>
<div id='root'></div>
<!-- dependencies -->
<script src='../node_modules/react/dist/react.js'></script>
<script src='../node_modules/react-dom/dist/react-dom.js'></script>
<!-- main -->
<script src='./bundle.js'></script>
</body>
</html>
./app/main.tsx 中添加:
//這里使用react-router對SAP應(yīng)用進行跳轉(zhuǎn)
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import * as ReactRouter from 'react-router'
const { Router, Route, IndexRoute, hashHistory } = ReactRouter
class Test extends React.Component<undefined, undefined> {
render(){
return <div>Hello TypeScript</div>
}
}
ReactDOM.render((
<Router history={hashHistory}>
<Route path='/' component={Test}></Route>
</Router>
), document.getElementById('root'))
啟動項目
- 監(jiān)視并且打包TypeScript文件
- $
webpack --watch
- $
- 使用webpak-dev-server運行開發(fā)服務(wù)器
- $
npm run web
- $
- 修改./app/index.tsx中的代碼,刷新頁面試試是否成功
至此, 整個項目已經(jīng)搭建完成了,好好享受TypeScript吧
