# reactv18

**Repository Path**: webfront_pack_public/reactv18

## Basic Information

- **Project Name**: reactv18
- **Description**: reactv18的基础内容项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-12-09
- **Last Updated**: 2024-03-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# reactv18
[ui库](https://antd-mobile.gitee.io/zh/guide/quick-start)

## 创建项目和项目配置
1. 创建ts模板的基础react：`npx create-react-app my-app --template typescript`
2. 找到更多模板，[点击](https://www.npmjs.com/search?q=cra-template-*)
3. 分析项目里的包：`npm install --save source-map-explorer`
  ```bash
  "scripts": {
+    "analyze": "source-map-explorer 'build/static/js/*.js'",
  ```
   run: ```bash
          npm run build
          npm run analyze
        ```
4. 使用https协议开发：`set HTTPS=true&&npm start`
5. 环境变量
   5.1 .env.development 开发环境 .env.test 测试环境 .env.production 生产环境 .env.local 除了测试都会加载这个
   5.2 代码里使用：`rocess.env.NODE_ENV` `rocess.env.API`
6. 配置代理请求：[官方](https://create-react-app.dev/docs/proxying-api-requests-in-development)
   6.1 建议创建文件，这样可以配置多个
7. 路径别名配置
   1. 安装插件`@craco/craco`
   2. package.json 改成craco启动方式
   ```bash 
    "start": "craco  start",
    "build": "craco  build",
    "test": "craco  test",
   ```
   3. 根目录下创建两个文件：craco.config.js path.tsconfig.json
   4. craco.config.js 写入
   ```js
    const path = require("path");
      module.exports = {
        webpack: {
          alias: {
            // @映射src路径
            "@": path.resolve(__dirname, "src"),
          },
        },
      };
   ```
   5. path.tsconfig.json 写入
   ```js 
          {
        "compilerOptions": {
          "baseUrl": "./",
          "paths": {
            "@/*": [
              "src/*"
            ],
            "@assets/*": [
              "src/assets/*"
            ]
          }
        }
      }
   ```
    7. tsconfig.json 文件添加
    ```bash 
        ...
        "extends": "./path.tsconfig.json"
      }
    ```
8. 重启项目即可