TypeScript 官方手册：React 与 Webpack 集成指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00949/article/details/148508395

TypeScript 官方手册：React 与 Webpack 集成指南

TypeScript-Handbook Deprecated, please use the TypeScript-Website repo instead 项目地址: https://gitcode.com/gh_mirrors/ty/TypeScript-Handbook

TypeScript 与 React 和 Webpack 的结合是现代前端开发中非常流行的技术栈组合。本文将详细介绍如何从零开始搭建这样一个开发环境。

项目初始化与结构规划

首先我们需要创建一个新的项目目录并规划基本结构：

mkdir my-react-ts-project
cd my-react-ts-project

推荐的项目目录结构如下：

my-react-ts-project/
├─ dist/         # 编译输出目录
└─ src/          # 源代码目录
   └─ components/ # React组件目录

初始化 npm 项目：

npm init -y

安装必要依赖

核心依赖

Webpack：代码打包工具
React：前端框架
TypeScript：类型检查与编译

npm install --save-dev webpack webpack-cli
npm install --save react react-dom
npm install --save-dev typescript @types/react @types/react-dom

开发工具

ts-loader：让Webpack能够处理TypeScript文件
source-map-loader：提供源码映射支持

npm install --save-dev ts-loader source-map-loader

配置TypeScript

创建 tsconfig.json 文件：

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es6",
        "jsx": "react"
    }
}

关键配置说明：

jsx: "react"：将TSX转换为React.createElement调用
sourceMap: true：生成源码映射文件
noImplicitAny: true：禁止隐式any类型

编写React组件

函数式组件示例

在 src/components/Hello.tsx 中：

import * as React from "react";

export interface HelloProps { 
    compiler: string; 
    framework: string; 
}

export const Hello = (props: HelloProps) => (
    <h1>Hello from {props.compiler} and {props.framework}!</h1>
);

类组件示例

import * as React from "react";

export interface HelloProps { 
    compiler: string; 
    framework: string; 
}

export class Hello extends React.Component<HelloProps> {
    render() {
        return (
            <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>
        );
    }
}

创建入口文件

在 src/index.tsx 中：

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Hello } from "./components/Hello";

ReactDOM.render(
    <Hello compiler="TypeScript" framework="React" />,
    document.getElementById("root")
);

HTML模板

创建 index.html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>TypeScript + React</title>
    </head>
    <body>
        <div id="root"></div>
        
        <!-- 开发环境使用的React库 -->
        <script src="./node_modules/react/umd/react.development.js"></script>
        <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
        
        <!-- 打包后的应用代码 -->
        <script src="./dist/main.js"></script>
    </body>
</html>

Webpack配置

创建 webpack.config.js：

module.exports = {
    mode: "development",
    devtool: "source-map",
    
    entry: "./src/index.tsx",
    
    output: {
        filename: "main.js",
        path: __dirname + "/dist"
    },
    
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json"]
    },
    
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: "ts-loader"
            },
            {
                enforce: "pre",
                test: /\.js$/,
                loader: "source-map-loader"
            }
        ]
    },
    
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
};

配置说明：