手动打造一个原生TypeScript的React项目，新手小白不求明白，只求跑起来

前端

2023-11-02 02:01:37

React是一个非常流行的前端框架，而TypeScript是一种静态类型语言，它可以帮助我们避免很多潜在的错误，编写更健壮的代码。将它们结合起来，可以让我们在构建复杂的项目时更加得心应手。

在这篇指南中，我们将手动搭建一个支持TypeScript的React项目，从头开始一步步搭建，无需使用任何脚手架工具。这样做的好处是，您可以更深入地了解项目的内部结构和原理，为未来的项目开发打下坚实的基础。

前提条件

在开始之前，您需要确保已经安装了以下软件：

Node.js（推荐版本：16.x或更高）
npm（Node.js包管理器）
文本编辑器或IDE（推荐：VSCode）

步骤 1：初始化项目

首先，创建一个新的项目文件夹，然后在该文件夹内打开命令行工具（例如cmd或终端）。使用npm初始化一个新的npm项目：

npm init -y

这将创建一个package.json文件，其中包含项目的基本信息。

步骤 2：安装依赖项

接下来，我们需要安装必要的依赖项。在命令行中输入以下命令：

npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript ts-loader typescript react react-dom

这些依赖项包括：

webpack：一个模块打包工具，可以将我们的代码打包成一个可运行的包。
webpack-cli：webpack的命令行工具，可以方便地使用webpack。
webpack-dev-server：webpack的开发服务器，可以帮助我们在开发过程中快速预览和测试我们的项目。
babel-loader：一个webpack加载器，可以将我们的TypeScript代码转换成浏览器可以理解的JavaScript代码。
@babel/core：Babel的核心库。
@babel/preset-env：Babel的一个预设，可以将我们的代码转换成当前环境可以运行的JavaScript代码。
@babel/preset-react：Babel的一个预设，可以将我们的React代码转换成JavaScript代码。
@babel/preset-typescript：Babel的一个预设，可以将我们的TypeScript代码转换成JavaScript代码。
ts-loader：一个webpack加载器，可以将我们的TypeScript代码转换成JavaScript代码。
typescript：TypeScript的编译器。
react：React库。
react-dom：React DOM库。

步骤 3：创建配置文件

接下来，我们需要创建一些配置文件。在项目文件夹中，创建一个名为tsconfig.json的文件，并添加以下内容：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react-jsx",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ]
  }
}

这个文件是TypeScript的配置文件，其中指定了TypeScript编译器的选项。

步骤 4：创建入口文件

接下来，我们需要创建一个入口文件，作为项目的起点。在项目文件夹中，创建一个名为index.ts的文件，并添加以下内容：

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return <h1>Hello, World!</h1>;
};

ReactDOM.render(<App />, document.getElementById("root"));

这个文件是我们的React组件，它将输出一个简单的“Hello, World!”文本。

步骤 5：创建webpack配置文件

接下来，我们需要创建一个webpack配置文件，用于告诉webpack如何打包我们的代码。在项目文件夹中，创建一个名为webpack.config.js的文件，并添加以下内容：

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.ts",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
      {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              "@babel/preset-env",
              "@babel/preset-react",
              "@babel/preset-typescript",
            ],
          },
        },
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    port: 3000,
  },
};