从头开始构建可靠的React+Typescript环境

2023-12-06 02:22:03

1. 项目初始化

首先，您需要创建一个新的项目目录并初始化一个Git仓库。在命令行中执行以下命令：

mkdir my-react-app
cd my-react-app
git init

然后，使用npm或yarn安装项目所需的依赖包。推荐使用yarn，因为它具有更快的安装速度和更稳定的依赖关系管理。

yarn add react react-dom typescript

2. 代码组织

在项目根目录下创建一个src文件夹，用于存放源代码。在src文件夹下，创建一个index.ts文件，作为项目的主入口文件。

3. 配置TypeScript

在项目根目录下创建一个tsconfig.json文件，用于配置TypeScript编译器。该文件的典型配置如下：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react-jsx",
    "outDir": "./dist",
  }
}

4. 搭建构建工具

使用webpack作为构建工具。在项目根目录下安装webpack和webpack-cli：

yarn add webpack webpack-cli

然后，创建一个webpack.config.js文件，用于配置webpack。该文件的典型配置如下：

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
};