脚手架创建

通过脚手架创建 create-react-app hello-tsx --template typescript。

自定义创建

目录结构

image.png

新建项目和安装包

  1. npm init -y // 生成package.json 
  2. tsc --init  // 生成tsconfig.json
  3. npm i react react-dom -S
  4. npm i @babel/core @babel/preset-env @babel/preset-react @types/react @types/react-dom babel-loader clean-webpack-plugin html-webpack-plugin ts-loader typescript webpack webpack-cli webpack-dev-server webpack-merge -D
Webpack相关 React相关 TypeScript相关 babel
webpack webpack-cli
webpack-dev-server
webpack-merge
clean-webpack-plugin
html-webpack-plugin		 react
react-dom
@types/react
@types/react-dom		 typescript
ts-loader		 @babel/core @babel/preset-env
@babel/preset-react
babel-loader

准备基础的配置

package.json

  1. {
  2.     "scripts": {
  3.     "start": "webpack serve --config build/webpack.config.js"
  4.   }
  5. }

tsconfig.json 

  1. {
  2.   "compilerOptions": {
  3.     "jsx": "react",
  4.   }
  5. }

.babelrc

  1. {
  2.   "presets": [
  3.     "@babel/preset-env",
  4.     "@babel/preset-react"
  5.   ]
  6. }

public/index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>TypeScript In Action</title>
  9. </head>
  11. <body>
  12.   <div id="app"></div>
  13. </body>
  15. </html>

build/webpack.config.js

  1. const HtmlWebpackPlugin = require('html-webpack-plugin')
  3. module.exports = {
  4.   mode: 'development',
  5.   devtool: 'cheap-module-source-map',
  6.   entry: {
  7.     app: './src/index.tsx',
  8.   },
  9.   output: {
  10.     filename: '[name].[chunkhash:8].js',
  11.   },
  12.   resolve: {
  13.     extensions: ['.js', '.ts', '.tsx'],
  14.   },
  15.   optimization: {
  16.     splitChunks: {
  17.       chunks: 'all',
  18.     },
  19.   },
  20.   module: {
  21.     rules: [
  22.       {
  23.         test: /\.tsx?$/i,
  24.         use: ['babel-loader', 'ts-loader'],
  25.         exclude: /node_modules/,
  26.       },
  27.     ],
  28.   },
  29.   plugins: [
  30.     new HtmlWebpackPlugin({
  31.       template: 'public/index.html',
  32.     }),
  33.   ],
  34. }

src/index.tsx

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import Hello from './components/hello';
  5. ReactDOM.render(<Hello name="yefei" />, document.getElementById('app'));

src/componetns/hello.tsx

  1. import React from 'react';
  3. interface Greeting {
  4.   name: string
  5. }
  6. export default function Hello(props: Greeting) {
  7.   return <div>hello {props.name}, welecome to use typescript</div>
  8. }