React移动端项目准备（ts版）

一、创建项目

使用脚手架命令创建新项目：

1.通过命令行创建项目

npx create-react-app ts-geek-park-h5 --template typescript

2.src文件夹下，保留react-app-env.d.ts文件，删除其他文件，并且创建必要的文件

 项目结构：

src
  >api                  封装接口
  >assets               项目资源
  >components           通用组件
  >hooks                自定义钩子函数
  >pages                页面组件
  >store                仓库
  >utils                工具封装
  App.tsx               根组件
  index.tsx             项目入口
  react-app-env.d.ts

（1）src下创建目录api、assets、components、hooks、pages、store、utils

mkdir api assets components hooks pages store utils

（2）src下创建根组件 App.tsx

import React from 'react';

export default function App() {
  return (
    <div>
      <h1>根组件</h1>
    </div>
  )
}

（3）src下创建入口文件 index.tsx

import ReactDOM from 'react-dom'
import App from './App'

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

3.修改页面模板 public/index.html 中的页面标题

<title>App</title>

二、配置路径别名

1.安装修改 CRA 配置的包：

npm i -D @craco/craco  -f

2.在项目根目录中创建 craco 的配置文件：craco.config.js，并添加如下代码：

const path = require('path')

module.exports = {
  // webpack 配置
  webpack: {
    // 配置别名
    alias: {
      // 约定：使用 @ 表示 src 文件所在路径
      '@': path.resolve(__dirname, 'src'),
    },
  },
}

3.在项目根目录中新建 path.tsconfig.json，并添加如下代码：

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

4.根目录的tsconfig.json 引入路径配置：（"extends": "./path.tsconfig.json",）

{
+ "extends": "./path.tsconfig.json",
  "compilerOptions": {
    "target": "es5",
 ......
   }
}

5.在package.json 文件修改启动命令

"scripts": {
-"start": "react-scripts start",
-"build": "react-scripts build",
-"test": "react-scripts test",
+"start": "craco start",
+"build": "craco build",
+"test": "craco test",
    "eject": "react-scripts eject"
  },