第一步

npm install -g create-react-app
npx create-react-app ai-xxyy-courseware --template typescript

package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.0",
    "@types/node": "^16.11.21",
    "@types/react": "^17.0.38",
    "@types/react-dom": "^17.0.11",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "typescript": "^4.5.4",
    "web-vitals": "^2.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {}
}

第二步

npm i react-app-rewired customize-cra --save-dev

本次所用版本

"devDependencies": {
    "customize-cra": "^1.0.0",
    "react-app-rewired": "^2.1.11"
}

第三步

• 在项目根目录下新建 paths.json，输入下面内容

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

• 在tsconfig.json中引入

{
  "extends": "./paths.json",
  "compilerOptions": {
    // ....
  }
 }

• 在根目录添加 config-overrides.js，配置以下内容

const {
  override,
  addWebpackAlias,
} = require("customize-cra");

const PKG = require("./package.json");
const path = require("path");

if (process.env.NODE_ENV === "production") {
  process.env.GENERATE_SOURCEMAP = "false";
}

module.exports = override(
  //别名配置
  addWebpackAlias({
    "@": path.join(__dirname, "./src"),
  }),
  (config) => {
    // 配置打包目录输出到dist/PKG.name
    const paths = require("react-scripts/config/paths");
    paths.appBuild = path.join(path.dirname(paths.appBuild), `dist/${PKG.name}`)
    config.output.path = paths.appBuild

    // 去掉打包生产map文件
    // config.devtool = config.mode === 'development' ? 'cheap-module-source-map' : false;
    if (process.env.NODE_ENV === "production") {
      config.devtool = false;
    }

    return config
  }
)

最后一步!!!

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  }