一步步创建TypeScript React项目

本文会一步步配置一个React的TypeScript开发环境.使用TypeScript能够很大程度上的提高开发效率,特别是当您排错的时候...

本文涉及: TypeScript, Webpack, React, React-route, Webpack-dev-server

安装Visual Studio Code

Visual Studio Code 官网

创建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

创建tsconfig.json

$ touch tsconfig.json

./tsconfig.json 中添加::

{
    "compilerOptions": {
        "outDir": "./build/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react"
    },
    "include": [
        "./**/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

创建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启动

设置-host=0.0.0.0指所有ip都可以访问, 方便移动端测试开发

"web": "webpack-dev-server -d --host=0.0.0.0 --port=7000 --hot build/",
    "watch": "webpack --watch"

到现在环境已经搭建好了, 赶快创建一个组件测试一下

添加项目代码测试

终端创建目录:

mkdir build app
touch build/index.html app/main.tsx

./build/index.html 中添加:

./app/main.tsx 中添加:

//这里使用react-router对SAP应用进行跳转
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 {
    render(){
        return 
Hello TypeScript
    }
}

ReactDOM.render((
    
        
    
), document.getElementById('root'))

启动项目

1. 监视并且打包TypeScript文件
   • $ webpack --watch
2. 使用webpak-dev-server运行开发服务器
   • $ npm run web
3. 修改./app/index.tsx中的代码,刷新页面试试是否成功

至此, 整个项目已经搭建完成了,好好享受TypeScript吧

参考资料

• TypeScript中文
• 详解webpack-dev-server的使用
• react-router教程