前言

使用 Typescript 开发 React 项目，推荐使用 Visual Studio Code 编辑器。

① 创建项目工程

mkdir project
cd project
yarn init

② 安装依赖包

安装 React 框架

yarn add react react-dom

安装 React 类型库 (帮助 Typescript 识别 React 库中定义的类型)

yarn add --dev @types/react @types/react-dom

安装 Typescript 和 ts-loader

yarn add --dev typescript ts-loader

安装 Webpack

yarn add --dev webpack webpack-cli webpack-dev-server webpack-merge

安装 Webpack 插件

yarn add --dev source-map-loader html-webpack-plugin clean-webpack-plugin uglifyjs-webpack-plugin

③ 配置 webpack

定义配置中所需要用到的文件路径
./config/paths.js

const path = require('path')
const fs = require('fs')

const appDirectory = fs.realpathSync(process.cwd())
const resolveApp = relativePath => path.resolve(appDirectory, relativePath)

module.exports = {
  appBuild: resolveApp('build'),
  appPublic: resolveApp('public'),
  appIndex: resolveApp('src/index.tsx'),
  appHtml: resolveApp('public/index.html'),
}

定义公用的 webpack 配置
./config/webpack/webpack.config.common.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
const paths = require('../paths')

module.exports = {
  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.json']
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        enforce: "pre",
        test: /\.js$/,
        loader: "source-map-loader"
      },
      {
        test: /\.(ts|tsx)$/,
        loader: "ts-loader",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'React + Typescript Project',
      template: paths.appHtml,
      inject: false,
    }),
  ],
}

定义 development 环境 webpack 配置
./config/webpack/webpack.config.dev.js

const webpack = require('webpack')
const merge = require('webpack-merge')

const paths = require('../paths')
const commonConfig = require('./webpack.config.common')

module.exports = merge.smart(commonConfig, {
  mode: 'development',
  entry: paths.appIndex,
  output: {
    filename: 'static/js/[name]-bundle-[hash:8].js',
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin()
  ],
  devServer: {
    // 开启前端路径回路映射，子路径映射到根路径，由前端路由框架来解析
    historyApiFallback: true,
    // 关闭 Host 检查，同网段其他设备，可通过内网 IP 访问本机服务（需要配合 host: '0.0.0.0'）使用
    disableHostCheck: true,
    host: '0.0.0.0',
    port: '8000',
    inline: true,
    hot: true,
    // 请求代理服务
    proxy: {
      '/api': {
        // 这里改为项目后端 API 接口 Host
        target: 'http://backend.api.host',
        // 支持跨域调用
        changeOrigin: true,
      }
    }
  }
})

定义 production 环境 webpack 配置
./config/webpack/webpack.config.prod.js

const merge = require('webpack-merge')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

const paths = require('../paths')
const commonConfig = require('./webpack.config.common')

module.exports = merge.smart(commonConfig, {
  mode: 'production',
  entry: paths.appIndex,
  output: {
    path: paths.appBuild,
    filename: 'static/js/[name]-[hash:8].js',
  },
  optimization: {
    minimizer: [
      // 压缩 js
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true
      }),
    ],
    splitChunks: {
      // 切割代码块，提取为独立的 chunk 文件
      chunks: 'all',
    },
  },
  plugins: [
    // 每次编译之前，清空上一次编译的文件
    new CleanWebpackPlugin([paths.appBuild], {
      root: process.cwd()
    }),
  ],
})

④ 配置 tsconfig

./tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true, 
    "jsx": "react",
    "lib": ["es6", "dom"],
    "module": "esnext",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "rootDir": "src",
    "sourceMap": true,
    "strict": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "build"
  ]
}

allowSyntheticDefaultImports: 允许合成默认导出

import * as React from 'react'
=>
import React from 'react'

⑤ 创建入口文件

./public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <% for (let css in htmlWebpackPlugin.files.css) { %>
      <link href="/<%=htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
    <% } %>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <% for (let chunk in htmlWebpackPlugin.files.chunks) { %>
      <script type="text/javascript" src="/<%=htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
    <% } %>
  </body>
</html>

./src/index.tsx

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <div>Hello React</div>,
  document.getElementById('root'),
)

⑥ 配置 package 启动脚本

./package.json

{
  ...,
  "scripts": {
    "start": "webpack-dev-server --open --colors --config config/webpack/webpack.config.dev.js",
    "build": "webpack --progress --colors --config config/webpack/webpack.config.prod.js"
  },
  ...
}