React TypeScript 项目基础配置指南：从零搭建开发环境

2026-02-04 05:25:38作者：姚月梅Lane

前言

本文将详细介绍如何为一个基于 React 和 TypeScript 的项目搭建基础开发环境。这个配置过程是后续开发的基础，包含了项目初始化、构建工具配置、开发服务器设置等关键步骤。

环境准备

在开始之前，请确保你的开发环境满足以下要求：

Node.js 环境：需要安装 Node.js 8.9.4 或更高版本
npm 包管理器：需要 npm 5.x.x 或更高版本

可以通过以下命令验证版本：

node -v
npm -v

项目初始化

1. 创建项目结构

首先创建一个空的项目文件夹并初始化 npm 项目：

mkdir react-typescript-project
cd react-typescript-project
npm init

在初始化过程中，你可以设置项目名称（如"reactboilerplate"）和描述（如"使用 React、TypeScript 和 Webpack 的示例项目"）。

2. 安装基础依赖

安装 Webpack 及其相关工具作为开发依赖：

npm install webpack webpack-cli webpack-dev-server --save-dev

配置构建工具

1. 添加构建脚本

在 package.json 中添加以下脚本：

"scripts": {
  "start": "webpack-dev-server --mode development --inline --hot --open",
  "build": "webpack --mode development"
}

start：启动开发服务器，支持热更新
build：执行项目构建

2. 安装必要加载器和插件

安装处理 TypeScript、CSS 等资源的加载器：

npm install awesome-typescript-loader css-loader file-loader html-webpack-plugin style-loader url-loader mini-css-extract-plugin --save-dev

TypeScript 配置

1. 安装 TypeScript

npm install typescript --save-dev

2. 创建 tsconfig.json

在项目根目录创建 tsconfig.json 文件：

{
  "compilerOptions": {
    "target": "es6",
    "module": "es6",
    "moduleResolution": "node",
    "declaration": false,
    "noImplicitAny": false,
    "sourceMap": true,
    "jsx": "react",
    "noLib": false,
    "suppressImplicitAnyIndexErrors": true
  },
  "compileOnSave": false,
  "exclude": ["node_modules"]
}

Babel 配置

虽然我们使用 TypeScript，但为了更好的兼容性，仍然需要配置 Babel：

1. 安装 Babel

npm install babel-core babel-preset-env --save-dev

2. 创建 .babelrc 文件

{
  "presets": [
    [
      "env",
      {
        "modules": false
      }
    ]
  ]
}

添加 UI 框架

安装 Bootstrap 作为项目依赖：

npm install bootstrap --save

项目结构搭建

1. 创建源代码目录

在项目根目录下创建 src 文件夹，用于存放源代码。

2. 添加入口文件

创建 src/index.ts 作为项目入口：

document.write('Hello from index.ts!');

3. 创建 HTML 模板

创建 src/index.html 作为应用的基础 HTML 结构：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sample App</title>
  </head>
  <body>
    <div class="well">
      <h1>Sample app</h1>
    </div>
  </body>
</html>

Webpack 配置

创建 webpack.config.js 文件，配置项目构建：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const basePath = __dirname;

module.exports = {
  context: path.join(basePath, 'src'),
  resolve: {
    extensions: ['.js', '.ts'],
  },
  entry: {
    app: './index.ts',
    vendorStyles: [
      '../node_modules/bootstrap/dist/css/bootstrap.css',
    ],
  },
  output: {
    path: path.join(basePath, 'dist'),
    filename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules/,
        loader: 'awesome-typescript-loader',
        options: {
          useBabel: true,
        },
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: 'assets/img/[name].[ext]?[hash]',
        },
      },
    ],
  },
  devtool: 'inline-source-map',
  devServer: {
    port: 8080,
    noInfo: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      hash: true,
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
};